I have the following code, and I can't get the text in the header-loggedout div to display centered within the borders. If I adjust the height, vertical margins, or padding of the div it always ends up moving the bottom border down for some reason. The image and text just won't align properly. How can I keep the text and image in (at least roughly) the same position but vertically align both to the middle between the top/bottom borders?
Here's a fiddle.
.header-lower {
position: relative;
display: table;
z-index: 0;
padding: 10px 0px;
width: 100%;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.header-logo {
display: table-cell;
text-align: left;
margin: 0 0 20px;
vertical-align: inherit !important;
}
.header-logo a {
display: inline-block;
float: left;
max-width: 100%;
line-height: 0;
}
.header-loggedout {
font-size: 26px;
vertical-align: middle;
}
<div class="header-lower">
<div class="header-logo">
<a href="#">
<img title="" alt="alt" src="http://placehold.it/310x39" />
</a>
</div>
<div class="header-loggedout">
Test Text
</div>
</div>
You can set display of .header-loggedout as table-cell:
.header-loggedout {
font-size: 26px;
vertical-align: middle;
display: table-cell;
}
Fiddle Here
replace this class
.header-lower {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
display: table;
padding: 10px 0;
position: relative;
text-align: center;
vertical-align: middle;
width: 100%;
z-index: 0;
}
You can use absolute positioning
Fiddle here
.header-loggedout {
font-size: 26px;
position:absolute;
top:50%;
right: 20px;
transform: translateY(-50%);
}
Related
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'm trying to float two elements of different height, with the shorter one being middle centered.
If I use inline-block instead of float the vertical centering works correctly, but the 'middle' div doesn't stretch to fit.
float example: http://jsfiddle.net/jonofan/r3pejgud/3/
inline-block: http://jsfiddle.net/jonofan/87kwpuxa/
Also interested to hear if people think should be going about this layout a different way entirely.
EDIT: I don't see this to be a duplicate of this question because my current code doesn't use table display. It just so happens that 'use table display' is the best answer in this case.
.header {
width: 600px;
border: 1px solid black;
display: inline-block;
}
.header img {
width: 50px;
float: left;
}
.middle {
position: relative;
top: 50%;
transform: translateY(-50%);
border: 1px solid gray;
height: 20px;
overflow: hidden;
}
.middle .itemheading {
position: absolute;
bottom: 0;
left: 0;
font-size: 1.8em;
}
.middle .itemdate {
position: absolute;
bottom: 0;
right: 0;
}
<div class='header'>
<img src='http://i.imgur.com/J2HToiP.jpg' />
<div class='middle'>
<span class='itemheading'>Heading Text</span>
<span class='itemdate'>Wednesday 01 July 2015</span>
</div>
</div>
Not perfect but you don't have to resort to absolute positioning. Use display: table-cell; instead.
Not sure how the border for .middle is supposed to work.
<div class='header'>
<div class="img-wrap">
<img src='http://i.imgur.com/J2HToiP.jpg' />
</div>
<div class='middle'>
<span class='itemheading'>Heading Text</span>
<span class='itemdate'>Wednesday 01 July 2015</span>
</div>
</div>
.header {
width: 600px;
border: 1px solid black;
}
.header img {
width: 50px;
}
.header .img-wrap {
display: table-cell;
vertical-align: middle;
}
.header .middle {
width: 100%;
display: table-cell;
vertical-align: middle;
border: 1px solid gray;
}
.itemdate {
float: right;
}
http://jsfiddle.net/87kwpuxa/2/
I have two divs within a larger div. The first one has an image, the second has text.
In the first div, there is a border below the image currently.
http://jsfiddle.net/8f3arq2y/
#newsfeed_header {
padding: 10px 0px;
width: 98%;
position: relative;
}
#nf_image:after {
content: " ";
border-bottom: solid 1px #000000;
display: block;
}
#nf_text {
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
font-family: Oswald;
}
<div id="newsfeed_header">
<div id="nf_image">
<img src="//dummyimage.com/35x35" />
</div>
<div id="nf_text">Read the latest</div>
<br/>
</div>
However I'd like the border to be next to the image, how can I do that?
|<img>__________________|
|text |
Here is how you can do it, also works with dynamic image size.
#nf_image {
display: table;
width: 100%;
margin-bottom: 10px;
}
#nf_image img {
display: table-cell;
vertical-align: top;
}
#nf_image:after {
display: table-cell;
content: "";
width: 100%;
border-bottom: solid 1px black;
}
UPDATED DEMO
#newsfeed_header {
padding: 10px 0px;
width: 98%;
position: relative;
}
#nf_image {
display: table;
width: 100%;
margin-bottom: 10px;
}
#nf_image img {
display: table-cell;
vertical-align: top;
}
#nf_image:after {
display: table-cell;
content: "";
width: 100%;
border-bottom: solid 1px black;
}
#nf_text {
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
font-family: Oswald;
}
<div id="newsfeed_header">
<div id="nf_image">
<img src="//dummyimage.com/35x35" />
</div>
<div id="nf_text">Read the latest</div>
<br/>
</div>
You could use an empty div below the image to do this:
#newsfeedheader{
padding: 10px 0px;
width: 98%;
position: relative;
}
#border {
margin-top: -8px;
margin-bottom: 10px;
border-top: 2px solid red;
z-index: -10;
}
#nf_text{
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
font-family: Oswald;
}
<div id="newsfeed_header">
<div id="nf_image"><img src="http://www.pixelsquish.com/wp-content/gallery/random-impulses/the-arch-jumpers.jpg" height="105" /></div>
<div id="border"></div>
<div id="nf_text">Read the latest</div>
<br/>
</div>
You give the div a negative top margin and a negative z-index so that it appears behind the image. That way the border you put on the div appears to be next to the image.
GOT IT!
I added a margin-left equal to the width of the image to the :after block. The bottom border now only starts immediately after the image.
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>
I have the table, inside the table I have another box , I am struggling to align the box in center of the table.
My CSS code is
Inside box code
.inside_box{
border: medium solid;
display: table-cell;
float: none;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
text-align: center;
vertical-align: middle;
width: 300px;
}
Outside table CSS:
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
How to align the inside box in center?
I assume that your HTML is something like this
<div class="outer_table">
<div class="inside_box">hello world</div>
</div>
So, you are using display: table-cell; for .inside_box and margin: auto; won't work, as it's a table cell now, so what you can do is, wrap a div around hello world text, like this
Demo
<div class="outer_table">
<div class="inside_box"><div>hello world</div></div>
</div>
And use CSS like
.inside_box {
border: medium solid;
display: table;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
width: 300px;
}
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
.inside_box > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Make sure you port the text-align: center; and vertical-align: middle; properties from .inside_box to .inside_box > div selector block.
Note: You won't need float: none;, not sure why you are using that.
As I got a comment, that what if you do not want to add an extra div element, so think like that you are using td without a table tag. So there is no way for that div with display: table-cell; to respect margin: auto;.
From Mozilla Developer Network :
Try to change and make your css like this:
.outer_table td {
text-align: center; // Align center
}
.inside_box {
float: none; // if you set float left or right your box will move right there
margin: 0px auto; // this setting for balancing margin left and right
}
<table class="outer_table">
<tr><td><div class="inside_box">Hellow wolrd!</div></td></tr>
</table>