What is wrong with my CSS alignment in my CODE
I am trying to get the Z to come in the middle of the cricle but I am not sure why its not coming in the middle. My code outputs this
<li class="avatar"><span class="profile-initials">Z</span></li>
This is the CSS I have on my application
.avatar {
vertical-align: middle;
width: 20px;
background-color: white;
height: 25px;
border-radius: 50%;
padding-left: 18px;
padding-bottom: 10px;
float: right;
margin: 10px;
}
.profile-initials {
margin-right: 2px;
}
html css
asked Dec 27 '18 at 21:23
Sambulo Senda
9711913
add a comment |
I am trying to get the Z to come in the middle of the cricle but I am not sure why its not coming in the middle. My code outputs this
<li class="avatar"><span class="profile-initials">Z</span></li>
This is the CSS I have on my application
.avatar {
vertical-align: middle;
width: 20px;
background-color: white;
height: 25px;
border-radius: 50%;
padding-left: 18px;
padding-bottom: 10px;
float: right;
margin: 10px;
}
.profile-initials {
margin-right: 2px;
}
html css
asked Dec 27 '18 at 21:23
Sambulo Senda
9711913
what happens when you change the margin-right to something like 8px?
– Patrick Simard
Dec 27 '18 at 21:30
.profile-initials { line-height: 25px; text-align: center; }
– helb
Dec 27 '18 at 21:30
Make sure you use jsfiddle.net next time you have an HTML question ! lol
– Patrick Simard
Dec 27 '18 at 21:31
@PatrickSimard or SO snippets, they work fine until you need JSX and other hipster stuff… :)
– helb
Dec 27 '18 at 21:33
Indeed hehe anyway, as long as we can play with the code and share an awnser ^^ (When possible)
– Patrick Simard
Dec 27 '18 at 21:35
add a comment |
I am trying to get the Z to come in the middle of the cricle but I am not sure why its not coming in the middle. My code outputs this
<li class="avatar"><span class="profile-initials">Z</span></li>
This is the CSS I have on my application
.avatar {
vertical-align: middle;
width: 20px;
background-color: white;
height: 25px;
border-radius: 50%;
padding-left: 18px;
padding-bottom: 10px;
float: right;
margin: 10px;
}
.profile-initials {
margin-right: 2px;
}
html css
asked Dec 27 '18 at 21:23
Sambulo Senda
9711913
I am trying to get the Z to come in the middle of the cricle but I am not sure why its not coming in the middle. My code outputs this
<li class="avatar"><span class="profile-initials">Z</span></li>
This is the CSS I have on my application
.avatar {
vertical-align: middle;
width: 20px;
background-color: white;
height: 25px;
border-radius: 50%;
padding-left: 18px;
padding-bottom: 10px;
float: right;
margin: 10px;
}
.profile-initials {
margin-right: 2px;
}
html css
html css
asked Dec 27 '18 at 21:23
Sambulo Senda
9711913
asked Dec 27 '18 at 21:23
Sambulo Senda
9711913
asked Dec 27 '18 at 21:23
Sambulo Senda
9711913
asked Dec 27 '18 at 21:23
Sambulo Senda
9711913
asked Dec 27 '18 at 21:23
Sambulo Senda
9711913
9711913
what happens when you change the margin-right to something like 8px?
– Patrick Simard
Dec 27 '18 at 21:30
.profile-initials { line-height: 25px; text-align: center; }
– helb
Dec 27 '18 at 21:30
Make sure you use jsfiddle.net next time you have an HTML question ! lol
– Patrick Simard
Dec 27 '18 at 21:31
@PatrickSimard or SO snippets, they work fine until you need JSX and other hipster stuff… :)
– helb
Dec 27 '18 at 21:33
Indeed hehe anyway, as long as we can play with the code and share an awnser ^^ (When possible)
– Patrick Simard
Dec 27 '18 at 21:35
add a comment |
what happens when you change the margin-right to something like 8px?
– Patrick Simard
Dec 27 '18 at 21:30
.profile-initials { line-height: 25px; text-align: center; }
– helb
Dec 27 '18 at 21:30
Make sure you use jsfiddle.net next time you have an HTML question ! lol
– Patrick Simard
Dec 27 '18 at 21:31
@PatrickSimard or SO snippets, they work fine until you need JSX and other hipster stuff… :)
– helb
Dec 27 '18 at 21:33
Indeed hehe anyway, as long as we can play with the code and share an awnser ^^ (When possible)
– Patrick Simard
Dec 27 '18 at 21:35
what happens when you change the margin-right to something like 8px?
– Patrick Simard
Dec 27 '18 at 21:30
what happens when you change the margin-right to something like 8px?
– Patrick Simard
Dec 27 '18 at 21:30
.profile-initials { line-height: 25px; text-align: center; }– helb
Dec 27 '18 at 21:30
.profile-initials { line-height: 25px; text-align: center; }– helb
Dec 27 '18 at 21:30
Make sure you use jsfiddle.net next time you have an HTML question ! lol
– Patrick Simard
Dec 27 '18 at 21:31
Make sure you use jsfiddle.net next time you have an HTML question ! lol
– Patrick Simard
Dec 27 '18 at 21:31
@PatrickSimard or SO snippets, they work fine until you need JSX and other hipster stuff… :)
– helb
Dec 27 '18 at 21:33
@PatrickSimard or SO snippets, they work fine until you need JSX and other hipster stuff… :)
– helb
Dec 27 '18 at 21:33
Indeed hehe anyway, as long as we can play with the code and share an awnser ^^ (When possible)
– Patrick Simard
Dec 27 '18 at 21:35
Indeed hehe anyway, as long as we can play with the code and share an awnser ^^ (When possible)
– Patrick Simard
Dec 27 '18 at 21:35
add a comment |
1 Answer
1
active
oldest
votes
It is hard to tell without looking at all of your code but the CSS could be much simpler using something like flexbox.
As for your code it seems your padding left and padding bottom are pushing it out of the frame and your and the border radius just makes it look like its outside of the circle.
Here is what I quickly came up with I hope it helps.
li {
background-color: #000;
color: #fff;
width: 300px;
height: 50px;
display: flex;
align-items: center;
}
.name {
flex-grow: 2;
padding-left: 18px;
}
.icon {
margin-right: 18px;
background-color: #fff;
padding: 10px;
color: #000;
border-radius: 50%;
}<ul>
<li><span class="name">Veris Veritatis</span><span class="icon">Z</span></li>
</ul>answered Dec 27 '18 at 21:55
KJEK-Code
261
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
});
}
});
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%2f53951020%2fwhat-is-wrong-with-my-css-alignment-in-my-code%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It is hard to tell without looking at all of your code but the CSS could be much simpler using something like flexbox.
As for your code it seems your padding left and padding bottom are pushing it out of the frame and your and the border radius just makes it look like its outside of the circle.
Here is what I quickly came up with I hope it helps.
li {
background-color: #000;
color: #fff;
width: 300px;
height: 50px;
display: flex;
align-items: center;
}
.name {
flex-grow: 2;
padding-left: 18px;
}
.icon {
margin-right: 18px;
background-color: #fff;
padding: 10px;
color: #000;
border-radius: 50%;
}<ul>
<li><span class="name">Veris Veritatis</span><span class="icon">Z</span></li>
</ul>answered Dec 27 '18 at 21:55
KJEK-Code
261
add a comment |
It is hard to tell without looking at all of your code but the CSS could be much simpler using something like flexbox.
As for your code it seems your padding left and padding bottom are pushing it out of the frame and your and the border radius just makes it look like its outside of the circle.
Here is what I quickly came up with I hope it helps.
li {
background-color: #000;
color: #fff;
width: 300px;
height: 50px;
display: flex;
align-items: center;
}
.name {
flex-grow: 2;
padding-left: 18px;
}
.icon {
margin-right: 18px;
background-color: #fff;
padding: 10px;
color: #000;
border-radius: 50%;
}<ul>
<li><span class="name">Veris Veritatis</span><span class="icon">Z</span></li>
</ul>answered Dec 27 '18 at 21:55
KJEK-Code
261
add a comment |
It is hard to tell without looking at all of your code but the CSS could be much simpler using something like flexbox.
As for your code it seems your padding left and padding bottom are pushing it out of the frame and your and the border radius just makes it look like its outside of the circle.
Here is what I quickly came up with I hope it helps.
li {
background-color: #000;
color: #fff;
width: 300px;
height: 50px;
display: flex;
align-items: center;
}
.name {
flex-grow: 2;
padding-left: 18px;
}
.icon {
margin-right: 18px;
background-color: #fff;
padding: 10px;
color: #000;
border-radius: 50%;
}<ul>
<li><span class="name">Veris Veritatis</span><span class="icon">Z</span></li>
</ul>answered Dec 27 '18 at 21:55
KJEK-Code
261
It is hard to tell without looking at all of your code but the CSS could be much simpler using something like flexbox.
As for your code it seems your padding left and padding bottom are pushing it out of the frame and your and the border radius just makes it look like its outside of the circle.
Here is what I quickly came up with I hope it helps.
li {
background-color: #000;
color: #fff;
width: 300px;
height: 50px;
display: flex;
align-items: center;
}
.name {
flex-grow: 2;
padding-left: 18px;
}
.icon {
margin-right: 18px;
background-color: #fff;
padding: 10px;
color: #000;
border-radius: 50%;
}<ul>
<li><span class="name">Veris Veritatis</span><span class="icon">Z</span></li>
</ul>li {
background-color: #000;
color: #fff;
width: 300px;
height: 50px;
display: flex;
align-items: center;
}
.name {
flex-grow: 2;
padding-left: 18px;
}
.icon {
margin-right: 18px;
background-color: #fff;
padding: 10px;
color: #000;
border-radius: 50%;
}<ul>
<li><span class="name">Veris Veritatis</span><span class="icon">Z</span></li>
</ul>li {
background-color: #000;
color: #fff;
width: 300px;
height: 50px;
display: flex;
align-items: center;
}
.name {
flex-grow: 2;
padding-left: 18px;
}
.icon {
margin-right: 18px;
background-color: #fff;
padding: 10px;
color: #000;
border-radius: 50%;
}<ul>
<li><span class="name">Veris Veritatis</span><span class="icon">Z</span></li>
</ul>answered Dec 27 '18 at 21:55
KJEK-Code
261
answered Dec 27 '18 at 21:55
KJEK-Code
261
answered Dec 27 '18 at 21:55
KJEK-Code
261
answered Dec 27 '18 at 21:55
KJEK-Code
261
261
add a comment |
add a comment |
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.
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%2f53951020%2fwhat-is-wrong-with-my-css-alignment-in-my-code%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
what happens when you change the margin-right to something like 8px?
– Patrick Simard
Dec 27 '18 at 21:30
.profile-initials { line-height: 25px; text-align: center; }– helb
Dec 27 '18 at 21:30
Make sure you use jsfiddle.net next time you have an HTML question ! lol
– Patrick Simard
Dec 27 '18 at 21:31
@PatrickSimard or SO snippets, they work fine until you need JSX and other hipster stuff… :)
– helb
Dec 27 '18 at 21:33
Indeed hehe anyway, as long as we can play with the code and share an awnser ^^ (When possible)
– Patrick Simard
Dec 27 '18 at 21:35