Mixing
CSS - Circle with letters in the middle
1
I'm trying to do this
As you can see, the icon is not centered. I want the circle to be "pulled up" a bit so it looks nice.
Here is my html (angular):
// Icon component
<div>
<i><ng-content></ng-content></i>
</div>
// Parent Component
<div>
<p>Connect with <app-initials-icon>OT</app-initials-icon> {{ contact }} </p>
</div>
// For Simplicity (ignoring angular, so you can ignore above if you're not familiar)
<div>
<p>Connect with
<div> // the div that the css below applies to
<i>OT</i>
</div>
</p>
</div>
Here is my css
div {
display: inline-block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
}
Any idea how?
html css angular
asked Nov 20 '18 at 16:47
AsoolAsool
5741621
add a comment |
1
I'm trying to do this
As you can see, the icon is not centered. I want the circle to be "pulled up" a bit so it looks nice.
Here is my html (angular):
// Icon component
<div>
<i><ng-content></ng-content></i>
</div>
// Parent Component
<div>
<p>Connect with <app-initials-icon>OT</app-initials-icon> {{ contact }} </p>
</div>
// For Simplicity (ignoring angular, so you can ignore above if you're not familiar)
<div>
<p>Connect with
<div> // the div that the css below applies to
<i>OT</i>
</div>
</p>
</div>
Here is my css
div {
display: inline-block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
}
Any idea how?
html css angular
asked Nov 20 '18 at 16:47
AsoolAsool
5741621
Seems to be working for me. Check this out.
– SiddAjmera
Nov 20 '18 at 16:52
1
You could use position to align it
– Alexander Staroselsky
Nov 20 '18 at 16:53
Try: Use position: relative; top: -10px; Tha should move it up. Experiment the best value.
– Poul Bak
Nov 20 '18 at 16:59
add a comment |
1
1
1
I'm trying to do this
As you can see, the icon is not centered. I want the circle to be "pulled up" a bit so it looks nice.
Here is my html (angular):
// Icon component
<div>
<i><ng-content></ng-content></i>
</div>
// Parent Component
<div>
<p>Connect with <app-initials-icon>OT</app-initials-icon> {{ contact }} </p>
</div>
// For Simplicity (ignoring angular, so you can ignore above if you're not familiar)
<div>
<p>Connect with
<div> // the div that the css below applies to
<i>OT</i>
</div>
</p>
</div>
Here is my css
div {
display: inline-block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
}
Any idea how?
html css angular
asked Nov 20 '18 at 16:47
AsoolAsool
5741621
I'm trying to do this
As you can see, the icon is not centered. I want the circle to be "pulled up" a bit so it looks nice.
Here is my html (angular):
// Icon component
<div>
<i><ng-content></ng-content></i>
</div>
// Parent Component
<div>
<p>Connect with <app-initials-icon>OT</app-initials-icon> {{ contact }} </p>
</div>
// For Simplicity (ignoring angular, so you can ignore above if you're not familiar)
<div>
<p>Connect with
<div> // the div that the css below applies to
<i>OT</i>
</div>
</p>
</div>
Here is my css
div {
display: inline-block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
}
Any idea how?
html css angular
html css angular
asked Nov 20 '18 at 16:47
AsoolAsool
5741621
asked Nov 20 '18 at 16:47
AsoolAsool
5741621
asked Nov 20 '18 at 16:47
AsoolAsool
5741621
asked Nov 20 '18 at 16:47
AsoolAsool
5741621
asked Nov 20 '18 at 16:47
AsoolAsool
5741621
5741621
Seems to be working for me. Check this out.
– SiddAjmera
Nov 20 '18 at 16:52
1
You could use position to align it
– Alexander Staroselsky
Nov 20 '18 at 16:53
Try: Use position: relative; top: -10px; Tha should move it up. Experiment the best value.
– Poul Bak
Nov 20 '18 at 16:59
add a comment |
Seems to be working for me. Check this out.
– SiddAjmera
Nov 20 '18 at 16:52
1
You could use position to align it
– Alexander Staroselsky
Nov 20 '18 at 16:53
Try: Use position: relative; top: -10px; Tha should move it up. Experiment the best value.
– Poul Bak
Nov 20 '18 at 16:59
Seems to be working for me. Check this out.
– SiddAjmera
Nov 20 '18 at 16:52
Seems to be working for me. Check this out.
– SiddAjmera
Nov 20 '18 at 16:52
1
1
You could use position to align it
– Alexander Staroselsky
Nov 20 '18 at 16:53
You could use position to align it
– Alexander Staroselsky
Nov 20 '18 at 16:53
Try: Use position: relative; top: -10px; Tha should move it up. Experiment the best value.
– Poul Bak
Nov 20 '18 at 16:59
Try: Use position: relative; top: -10px; Tha should move it up. Experiment the best value.
– Poul Bak
Nov 20 '18 at 16:59
add a comment |
2 Answers
2
active
oldest
votes
1
div {
display: block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
}
i {
position: relative
}
i.one {
top:-15px;
}
i.two {
bottom:-15px;
}<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="one">OT</i>
</div>
</p>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="two">OT</i>
</div>
</p>
</div>You can put position directly on the i tag and you can control it's x and y using top, left, right, and bottom
answered Nov 20 '18 at 16:59
DammeulDammeul
889717
add a comment |
1
Add vertical-align: middle; to your div i css to vertically align the circle.
Full css:
div {
display: inline-block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
vertical-align: middle;
}
answered Nov 20 '18 at 17:01
jmalatiajmalatia
384
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397726%2fcss-circle-with-letters-in-the-middle%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
div {
display: block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
}
i {
position: relative
}
i.one {
top:-15px;
}
i.two {
bottom:-15px;
}<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="one">OT</i>
</div>
</p>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="two">OT</i>
</div>
</p>
</div>You can put position directly on the i tag and you can control it's x and y using top, left, right, and bottom
answered Nov 20 '18 at 16:59
DammeulDammeul
889717
add a comment |
1
div {
display: block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
}
i {
position: relative
}
i.one {
top:-15px;
}
i.two {
bottom:-15px;
}<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="one">OT</i>
</div>
</p>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="two">OT</i>
</div>
</p>
</div>You can put position directly on the i tag and you can control it's x and y using top, left, right, and bottom
answered Nov 20 '18 at 16:59
DammeulDammeul
889717
add a comment |
1
1
1
div {
display: block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
}
i {
position: relative
}
i.one {
top:-15px;
}
i.two {
bottom:-15px;
}<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="one">OT</i>
</div>
</p>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="two">OT</i>
</div>
</p>
</div>You can put position directly on the i tag and you can control it's x and y using top, left, right, and bottom
answered Nov 20 '18 at 16:59
DammeulDammeul
889717
div {
display: block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
}
i {
position: relative
}
i.one {
top:-15px;
}
i.two {
bottom:-15px;
}<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="one">OT</i>
</div>
</p>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="two">OT</i>
</div>
</p>
</div>You can put position directly on the i tag and you can control it's x and y using top, left, right, and bottom
div {
display: block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
}
i {
position: relative
}
i.one {
top:-15px;
}
i.two {
bottom:-15px;
}<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="one">OT</i>
</div>
</p>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="two">OT</i>
</div>
</p>
</div>div {
display: block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
}
i {
position: relative
}
i.one {
top:-15px;
}
i.two {
bottom:-15px;
}<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="one">OT</i>
</div>
</p>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="two">OT</i>
</div>
</p>
</div>answered Nov 20 '18 at 16:59
DammeulDammeul
889717
answered Nov 20 '18 at 16:59
DammeulDammeul
889717
answered Nov 20 '18 at 16:59
DammeulDammeul
889717
answered Nov 20 '18 at 16:59
DammeulDammeul
889717
889717
add a comment |
add a comment |
1
Add vertical-align: middle; to your div i css to vertically align the circle.
Full css:
div {
display: inline-block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
vertical-align: middle;
}
answered Nov 20 '18 at 17:01
jmalatiajmalatia
384
add a comment |
1
Add vertical-align: middle; to your div i css to vertically align the circle.
Full css:
div {
display: inline-block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
vertical-align: middle;
}
answered Nov 20 '18 at 17:01
jmalatiajmalatia
384
add a comment |
1
1
1
Add vertical-align: middle; to your div i css to vertically align the circle.
Full css:
div {
display: inline-block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
vertical-align: middle;
}
answered Nov 20 '18 at 17:01
jmalatiajmalatia
384
Add vertical-align: middle; to your div i css to vertically align the circle.
Full css:
div {
display: inline-block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
vertical-align: middle;
}
answered Nov 20 '18 at 17:01
jmalatiajmalatia
384
answered Nov 20 '18 at 17:01
jmalatiajmalatia
384
answered Nov 20 '18 at 17:01
jmalatiajmalatia
384
answered Nov 20 '18 at 17:01
jmalatiajmalatia
384
384
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397726%2fcss-circle-with-letters-in-the-middle%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Seems to be working for me. Check this out.
– SiddAjmera
Nov 20 '18 at 16:52
1
You could use position to align it
– Alexander Staroselsky
Nov 20 '18 at 16:53
Try: Use position: relative; top: -10px; Tha should move it up. Experiment the best value.
– Poul Bak
Nov 20 '18 at 16:59