I'm trying to center the text horizontally, but it doesn't work. It seems to be because of the display: table-cell
Would you know a work around? (note that I'm using bootstrap)
Thanks! > Codepen: http://codepen.io/goodux/pen/wgBCf
html:
<div class="feature">
<span class="glyphicon glyphicon-star feature-icon"></span>
<p class="feature-text text-center">
Gather user's feedback and engineer's requirements.
</p>
</div>
css:
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
}
span.feature-icon {
background-color: #FA6900;
border-radius: 3px;
color: #FFF;
font-size: 3em;
padding: .5em;
position: absolute;
top: 0;
}
p.feature-text {
overflow: hidden;
padding: 0 .5em 0 6.5em;
vertical-align: middle;
height: 6em;
display: table-cell;
}
.text-center {
text-align: center;
}
For display:table-cell to work correctly it needs to be inside a display:table element.
So, if you change the .feature rule to
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
display:table;
width:100%;
}
it will work as expected: http://codepen.io/gpetrioli/pen/EDtCq
of course you could avoid using display:table-cell if it is not really needed. (and in your example it looks like it is not..)
Try p {text-align: center;margin: auto }and why are you using display:table-cell ?
Related
I'm trying to create a div, and then inside the div put the date on the left, and two icons on the right. Both should be vertically centered, have some margin to the edge, and margin between other elements in the parent div. But right now when I run it, the icons end up in strange positions, often clipping out of the div.
.c-project-bar {
width: 355px;
height: 30px;
display: table;
padding: 0px 10px;
background-color: #ffffff;
}
.c-project-date {
display: table-cell;
vertical-align: middle;
color: #828282;
font-size: 14px
}
.c-project-github-icon {
margin-left: 10px;
background-color: #000000;
height: 25px;
width: 25px;
float: right;
vertical-align: middle;
display: table-cell;
}
<div class="c-project-bar">
<p class="c-project-date">Aug, 2017</p>
<span class="c-project-github-icon"></span>
<span class="c-project-github-icon"></span>
</div>
https://jsfiddle.net/enyzhxyz/
Edit:
Everyone's answers are awesome, it seemed a major issue was the fact that the was inheriting { margin: 0px; }, and it was throwing a wrench in everyone's solutions. I solved this by including a margin: initial, before using any margin style later, so it first removed { margin: 0px; } then added the one I wanted.
When you give float: right you cannot vertically centre. Instead, use the inline-block technique:
.c-project-bar {
width: 355px;
padding: 0px 10px;
background: #ccf;
}
.c-project-date, .c-project-icons {
display: inline-block;
width: 48%;
vertical-align: middle;
}
.c-project-icons {
text-align: right;
}
.c-project-github-icon {
margin-left: 10px;
background-color: #000000;
height: 25px;
width:25px;
display: inline-block;
vertical-align: middle;
}
<div class="c-project-bar">
<p class="c-project-date">Aug, 2017</p>
<div class="c-project-icons">
<span class="c-project-github-icon"></span>
<span class="c-project-github-icon"></span>
</div>
</div>
I would have suggested you the transform and position centering technique, but it would be a too much of overkill for this solution. I have given some background colour to see it is perfectly vertical align middle. Although it uses slightly extra markup, this would be the right way that works on browsers that don't support flexbox too.
Here is a solution using css flexbox.
body {
background-color: #696969;
}
.c-project-bar {
display:flex;
align-items: center;
justify-content: space-between;
width: 355px;
height: 30px;
padding: 0px 10px;
background-color: #ffffff;
}
.c-project-date {
color: #828282;
font-size: 14px
}
.c-project-github-icon {
margin-left: 10px;
background-color: #000000;
height: 25px;
width:25px;
float: right;
}
<div class="c-project-bar">
<p class="c-project-date">Aug, 2017</p>
<div>
<span class="c-project-github-icon"></span>
<span class="c-project-github-icon"></span>
</div>
</div>
Another way to achieve this could be to use transform.
position: relative;
top: 50%;
transform: translateY(-50%);
.c-project-bar {
width: 355px;
height: 30px;
padding: 0px 10px;
background-color: #ccc;
}
.c-project-date {
margin: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
float: left;
color: #828282;
font-size: 14px
}
.c-project-github-icon {
margin-left: 10px;
background-color: #000000;
height: 25px;
width:25px;
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="c-project-bar">
<p class="c-project-date">Aug, 2017</p>
<span class="c-project-github-icon"></span>
<span class="c-project-github-icon"></span>
</div>
You can do it easily with display: flexbox.
.c-project-bar {
display: flex; // power
align-items: center; // aligning
width: 355px;
height: 30px;
padding: 0px 10px;
background-color: #ffffff;
}
.c-project-date {
margin-right: auto; // let's push other stuff to right side
color: #828282;
font-size: 14px
}
.c-project-github-icon {
margin-left: 10px;
background-color: #000000;
height: 25px;
width:25px;
}
Fixed jsfiddle
Regarding https://jsfiddle.net/postiffm/74cxr092/
> <div id="Tagline">
> I'm in the center.
> <div id="TaglineLeft"></div>
> <div id="TaglineRight">I am a phone #</div> </div>
How can I align the text in the TaglineRight so it has some space above it like the text in the center section? I've tried some padding and margin stuff, but nothing seems to work.
Thanks.
add line-height:30px; to #TaglineRight a
#TaglineLeft, #TaglineRight {
position: absolute;
color: white;
font-weight: normal;
text-align: center;
height: 100%;
width: 30%;
top: 0;
border-radius: 7px;
height: 20px;
padding: 5px;
}
you may add height: 20px; and padding: 5px; to #TaglineLeft, #TaglineRight { class
an old fashion way is to treat the child element as an table data by set it to display: table-cell, vertical-align: middle; & set it's parent to display: table;.
in that way you can change the height of the parent to whatever/whenever you like to and the child element will always stay vertical aligned. not like CSS3 solutions, it will work in old browsers too and cross browser support of course.
https://jsfiddle.net/ryf0w7rp/ - try to change the "#Tagline" element's height from 20px to other value and see the result.
*if you don't want main wrapper elements to use display: table so you can create another level of element to use display: table.
*for the example i made the solution just for the "#TaglineRight" element which has an inner <a> element. to make the other elements work the same, add the same structure and set the CSS to the right elements.
Instead of playing around with position:absolute/relative.
Consider using display:flex
check this solution
#Tagline {
color: white;
font-weight: normal;
letter-spacing: 2px;
text-align: center;
margin-bottom: 10px;
border: 0 solid #ff9706;
border-radius: 7px;
background-color: #ff9706;
display: flex;
height:30px;
line-height: 30px;
justify-content: space-between;
}
#TaglineLeft,
#TaglineRight {
color: white;
height: 100%;
width: 30%;
border-radius: 7px;
text-align: center;
}
#TaglineLeft {
margin-top: 0px;
background-color: #6673aa;
order: -1;
}
#TaglineRight {
border: 0 solid #7e922e;
background-color: #7e922e;
}
#TaglineRight a {
color: white;
letter-spacing: 1px;
text-decoration: none;
}
<div id="Tagline">
I'm in the center.
<div id="TaglineLeft">left line</div>
<div id="TaglineRight">I am a phone #
</div>
</div>
Hope it helps
When i put my inline-block element (14x14px) in single-line row (height and line-height = 20px), it takes place not in the middle of it's parent (vertical). Line-height problem picture
Here's a Сodepen example
HTML
<div class="status status_success"> Success</div>
<div class="status status_busy"> Busy</div>
<div class="status status_missed"> Missed</div>
CSS
body {
font-size: 16px;
line-height: 20px;
}
.status {
position: relative;
display: block;
white-space: nowrap;
border: 1px solid #000; // block border for helping test
margin: 0 0 20px;
&:before {
content: '';
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
background-color: #d6d6d6;
border-radius: 50%;
}
}
Tell me, please, why is it happening?
The vertical-align: middle aligns the middle of the element with the middle of lowercase letters in the parent, which simply means the vertical alignment is not a 100% precise way to put an element in the exact middle of its parent.
Src: https://css-tricks.com/almanac/properties/v/vertical-align/
In below samples I added a wrapper (and span's in 2:nd sample, with font size matching the pseudo's size) to show how they interact and how you can do to make the outcome look better.
Note: As suggested by "Vangel Tzo", flex is one way that does the job better.
.wrap {
padding: 20px;
font-size: 16px;
font-family: "helveticaneuecyr", Arial, sans-serif;
line-height: 20px;
}
.status {
position: relative;
white-space: nowrap;
border: 1px solid #000;
margin: 0 0 20px;
}
.status:before {
content: '';
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
background-color: #d6d6d6;
border-radius: 50%;
}
.status_success:before {
background-color: #3ad994;
}
.status_missed:before {
background-color: #e83e3e;
}
.status_busy:before {
background-color: #f5be48;
}
.status span {
display: inline-block;
vertical-align: middle;
font-size: 14px;
}
<div class="wrap">
<div class="status status_success"> Success</div>
<div class="status status_busy"> Busy</div>
<div class="status status_missed"> Missed</div>
</div>
<div class="wrap">
<div class="status status_success"> <span>Success</span></div>
<div class="status status_busy"> <span>Busy</span></div>
<div class="status status_missed"> <span>Missed</span></div>
</div>
You could use display: flex for parent element (.status) and the align-self: center property to center it vertically.
.status {
position: relative;
white-space: nowrap;
border: 1px solid #000;
margin: 0 0 20px;
display: flex;
}
.status:before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
align-self: center;
background-color: #d6d6d6;
border-radius: 50%;
}
An example: http://codepen.io/srekoble/pen/BKWJgx
As #LGSon explaination, the vertical-align is not a magical css, and its behaviour is never trusted by me. So I suggest an alternative way to align your elements in the way you want.
Because you already put position:relative in the .status, I suggest to use position:absolute to style for your generated content and it is more consistent between each browsers.
A codepen example: http://codepen.io/thovo/pen/MypQbW
try below code for horizontaly center code.
body { font-size: 16px; line-height: 20px; text-align:center;}
.status { float:none; position: relative; display:inline-block; white-space: nowrap; border: 1px solid #000; // block border for helping test margin: 0 0 20px;}
try below code for verticaly center code.
.status { display:table: width:100%; float:none; position: relative; display:inline-block; white-space: nowrap; border: 1px solid #000; // block border for helping test margin: 0 0 20px;}
.status:before { display:table-cell; vertical-align: middle;}
I have the following simple code snippet. It is taken out from my application where .a1 is a container button, which has an icon. The icon should be vertically middle aligned to the parents line-height/height, but it is shifted with 1px from top. Could you explain me why this is the behavior? Is there any solution?
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
Why?
Because inline-block elements render with "white-space". You can see this in this demo where no height/width is set on the parent element.
When you use vertical-align:middle; the "white space" is rendered before the element (on top) (black line in the demo). This space moves the child element down and therefore it doesn't appear verticaly centered.
how to fix :
You can use display:block; and calculate the margin to apply to the child element so it centers verticaly and horzontaly.
You can also take a look at this question which talks about white space and ways to avoid them.
Well, it seems like font-size:0; for .a1 seems also a fix for such issue.
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
font-size: 0;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00
Hi I'm trying to center the text in the first circle div. I think it's currently in the center of the div but when there is more than one characters like '200', it looks funky as below. I have the red circle background and trying to make the text in the center regardless of the characters. thank you in advance!
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
padding: 10px;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 10px;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<span class="label">This is the other text need to be</span>
<div class="bg"><span class="label">0</span></div>
<span class="label">This is the other text need to be</span>
</div>
Try to set width:100% on .bg .label as follows:
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
padding: 10px;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 100%;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<div class="bg"><span class="label">0</span></div>
</div>
EDIT: if you want to keep the same width for the circle and still center the text, you could replace width:10px; in .bg with the following:
.bg {
/* ... */
width: 35px;
padding: 10px 0;
text-align: center;
/* ... */
}
So the full snippet would look something like this:
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
width: 35px;
padding: 10px 0;
text-align: center;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 100%;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<div class="bg"><span class="label">0</span></div>
</div>
Try something like this. I'm guessing you are ok with fixing the width and height of your little circles? If so, this solution should work for you. The benefit here is your circles stay consistent visually regardless of the values placed within them.
You can adjust the width/height of the circle to your liking, and whatever value you place in there will remain centered. Keep in mind, with this solution, your circles won't scale to match the value's length should it expand beyond their bounds. I assume this is the behavior you're looking for, though, given your original code.
Also, note, you might need to adjust the top margin to position the values according to the height of the circles if you change them. Hope this helps!
.bg {
background: red;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;
width: 38px;
height: 38px;
}
.bg .label {
display: inline-block;
margin: 9px auto 0;
text-align: center;
width: 38px;
}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<span class="label">This is the other text need to be</span>
<div class="bg"><span class="label">0</span></div>
<span class="label">This is the other text need to be</span>
</div>