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 at 16:47
Asool
5121621
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 at 16:47
Asool
5121621
Seems to be working for me. Check this out.
– SiddAjmera
Nov 20 at 16:52
1
You could use position to align it
– Alexander Staroselsky
Nov 20 at 16:53
Try: Use position: relative; top: -10px; Tha should move it up. Experiment the best value.
– Poul Bak
Nov 20 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 at 16:47
Asool
5121621
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 at 16:47
Asool
5121621
asked Nov 20 at 16:47
Asool
5121621
asked Nov 20 at 16:47
Asool
5121621
asked Nov 20 at 16:47
Asool
5121621
asked Nov 20 at 16:47
Asool
5121621
5121621
Seems to be working for me. Check this out.
– SiddAjmera
Nov 20 at 16:52
1
You could use position to align it
– Alexander Staroselsky
Nov 20 at 16:53
Try: Use position: relative; top: -10px; Tha should move it up. Experiment the best value.
– Poul Bak
Nov 20 at 16:59
add a comment |
Seems to be working for me. Check this out.
– SiddAjmera
Nov 20 at 16:52
1
You could use position to align it
– Alexander Staroselsky
Nov 20 at 16:53
Try: Use position: relative; top: -10px; Tha should move it up. Experiment the best value.
– Poul Bak
Nov 20 at 16:59
Seems to be working for me. Check this out.
– SiddAjmera
Nov 20 at 16:52
Seems to be working for me. Check this out.
– SiddAjmera
Nov 20 at 16:52
1
1
You could use position to align it
– Alexander Staroselsky
Nov 20 at 16:53
You could use position to align it
– Alexander Staroselsky
Nov 20 at 16:53
Try: Use position: relative; top: -10px; Tha should move it up. Experiment the best value.
– Poul Bak
Nov 20 at 16:59
Try: Use position: relative; top: -10px; Tha should move it up. Experiment the best value.
– Poul Bak
Nov 20 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 at 16:59
Dammeul
896716
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 at 17:01
jmalatia
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 at 16:59
Dammeul
896716
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 at 16:59
Dammeul
896716
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 at 16:59
Dammeul
896716
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 at 16:59
Dammeul
896716
answered Nov 20 at 16:59
Dammeul
896716
answered Nov 20 at 16:59
Dammeul
896716
answered Nov 20 at 16:59
Dammeul
896716
896716
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 at 17:01
jmalatia
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 at 17:01
jmalatia
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 at 17:01
jmalatia
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 at 17:01
jmalatia
384
answered Nov 20 at 17:01
jmalatia
384
answered Nov 20 at 17:01
jmalatia
384
answered Nov 20 at 17:01
jmalatia
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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 at 16:52
1
You could use position to align it
– Alexander Staroselsky
Nov 20 at 16:53
Try: Use position: relative; top: -10px; Tha should move it up. Experiment the best value.
– Poul Bak
Nov 20 at 16:59