Been trying to vertically center 3 divs within another div and no matter what I try it doesn't work.
Please take a look at my example here:
http://jsfiddle.net/d6sLpxvc/
My html:
<body class="mainBackground">
<header class="wrap">
<div class="menuIcon">Menu Icon</div>
<div class="pageTitle">Good morning, John Doe</div>
<div class="logo">Logo</div>
</div>
</header>
</body>
My CSS:
.wrap {
height: 41px;
background-color: gray;
width: calc(100% - 34px);
margin: 17px auto;
}
.menuIcon {
display: table-cell;
float: left;
vertical-align: middle;
}
.logo {
float: right;
}
.pageTitle {
text-align: center;
vertical-align: middle;
}
The menu icon will actually be a small SVG icon with a fixed size of about ~28px. The logo on the right hand side also has a fixed size which has roughly double the height of the menu icon. I've used placed holder text for those images. The text in the middle MUST be centered horizontally as well within the browser canvas (not the div it's in).
The only thing that I absolutely need to do is use as little hardcoded pixel sizes as possible. So my end design must follow the psd's to the pixel but must be coded in percentages wherever possible. I'd like to stick with using width: calc(100% - 34px) if possible as well since this lets me use math for determining the div size. This means no using px to vertically center - I need to use percentages to vertically center these items in the div because they will change in the future and I cannot go back to adjust them to make sure they are always centered if the height is different(like menu icon or logo). Must work with IE9 - dont care about other browsers.
Would appreciate any help greatly!
You can't use display: table-cell; without display: table; and display: table-row;, plus table cells can't float. this is updated fiddle, is this what you are looking for? More about centering could be found at css-tricks.com
HTML
<header class="wrap">
<div class="row">
<div class="menuIcon">Menu Icon</div>
<div class="pageTitle">Good morning, John Doe</div>
<div class="logo">Logo</div>
</div>
</header>
CSS
.wrap {
height: 41px;
background-color: gray;
width: calc(100% - 34px);
margin: 17px auto;
display: table;
}
.row {
display: table-row;
}
.menuIcon {
display: table-cell;
vertical-align: middle;
}
.logo {
display: table-cell;
vertical-align: middle;
}
.pageTitle {
text-align: center;
vertical-align: middle;
display: table-cell;
}
You just need to apply line-height to the DIV's that are inside .wrap. The line-height property property value should be equal to to the height of .wrap for maximum result.
You can add line-height to them individually but the block of code below will do just that.
.wrap > div {
line-height: 41px;
display: inline;
margin: 0 10px 0 50px;
}
.wrap {
height: 41px;
background-color: gray;
width: calc(100% - 34px);
margin: 17px auto;
margin-top: 60px; /* Just for my presentation */
}
.wrap > div {
line-height: 41px;
display: inline-block;
margin: 0 10px 0 50px; /* Adjust to suit your need */
}
.menuIcon {
display: table-cell;
float: left;
vertical-align: middle;
}
.logo {
float: right;
}
.pageTitle {
text-align: center;
vertical-align: middle;
}
<header class="wrap">
<div class="menuIcon">Menu Icon</div>
<div class="pageTitle">Good morning, John Doe</div>
<div class="logo">Logo</div>
</header>
try this:
.wrap {
height: 41px;
background-color: gray;
text-align:center;
width: calc(100% - 34px);
margin: 17px auto;
}
.menuIcon {
float: left;
line-height: 41px;
}
.logo {
float: right;
line-height: 41px;
}
.pageTitle {
text-align: center;
display:inline-block;
line-height: 41px;
}
<body class="mainBackground">
<header class="wrap">
<div class="menuIcon">Menu Icon</div>
<div class="pageTitle">Good morning, John Doe</div>
<div class="logo">Logo</div>
</div>
</header>
</body>
Look at this question: Vertical alignment of elements in a div
This fiddle is especially helpful: http://jsfiddle.net/techsin/FAwku/1/
Taken from a solution in that fiddle provided by a comment to the linked question:
<div class="top6">
<div class="in6">6</div>
<div class="in6"></div>
<div class="in6"></div>
</div>
.top6 {background-color: blue; height: 100px; display:flex; align-items: center;}
.in6 {background-color: yellow; width: 30px; height: 30px; margin-right: 5px; }
Related
I have two elements that I want to place next to each other - one is a logo, the other is an "overflow" menu that will display a dropdown when clicked.
I want to have them scale so that the logo is at most 400px wide, and the menu button is always 1.5em wide and tall. The logo should stay vertically center aligned with the menu button, and the button should always be at the far right of the parent.
Tried using flexbox but I'm no CSS genius, I can't make it work. (btw, will we ever see CSS being more like the Android XML layout system? It'd be a breeze to use a LinearLayout with some gravity and weight to do something like this. With CSS it seems you always have to resort to hacks and hard-to-read solutions at some point)
So this is what it would look like when the logo is at it's maximum 400px width:
And here is what it would look like on a phone, where the logo needs to shrink to make room for the menu button:
Here's a solution using flexbox.
.header {
display: flex;
flex-direction: flex-end;
justify-content: space-between;
}
.logo {
background-image: url(http://placehold.it/400x50);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 50px;
max-width: 400px;
width: 100%;
}
.menu-toggle {
background-color: orange;
flex-shrink: 0;
height: 50px;
margin-left: 10px;
width: 50px;
}
<div class="header">
<div class="logo"></div>
<div class="menu-toggle"></div>
</div>
An easy way to do it is here.
.header{
margin:0px !important;
padding: 0px !important;
display: table;
width: 100%;
height: 1.5em;
overflow-y: hidden;
box-shadow: 0 1mm #aaa 5px;
vertical-align: middle !important;
position: relative;
}
#img-holder{
display: table-cell;
vertical-align: middle;
height : 100%;
background-color : blue;
max-width : 400px;
min-width : 250px;
padding: 0px !important;
}
#img {
display: table-cell;
max-width: 350px;
min-width: 150px;
height: 0.75em!important;
vertical-align: middle;
background-color: pink;
}
#menu-btn{
display: block;
margin: auto;
float: right;
height: 1.5em;
width: 1.5em;
background-color: orange;
border:none;
margin: 0px !important;
padding: none;
}
<div class="header">
<div id="img-holder"><span id="img"> Your Img</span></div>
<a id="menu-btn"></a>
</div>
I used line-height and vertical-align with calc.
html:
<div class="row">
<div class="menu-button"></div>
<div class="logo">
<img src="http://placehold.it/400x70">
</div>
</div>
css:
.menu-button {
background-color: #ffa200;
float: right;
height: 70px;
width: 70px;
}
img {
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
.logo {
float: left;
height: 70px;
line-height: 70px;
max-width: calc(100% - 80px);
}
Demo: https://jsfiddle.net/sabeti05/1yg32uqo/
In this style of using line-height and inline-block, why is the green item a few pixels below the middle? Shouldn't there be exactly 15px above and below?
.container{
height: 45px;
line-height: 45px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 15px;
background-color: green;
vertical-align: middle;
display: inline-block
}
<div class="container">
<div class="item">
</div>
</div>
I know there are other ways of vertically aligning items (including JS, absolute positions, and many more). I'm not trying to solve the general "how to vertically align a div".
The culprit here is not so much the line-height, but rather the vertical-align: middle. It tries to align your box with the text that may hypothetically be inside the parent box. Where the inner box ends up depends on the font-size of that text. You can push the box further down by increasing the font-size of its parent:
.container{
height: 45px;
width: 100%;
line-height: 45px;
font-size: 45px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 40px;
background-color: green;
vertical-align: middle;
display: inline-block;
}
<div class="container">
job
<div class="item">
</div>
</div>
As you can see, the text is closer to the bottom of its container than to the top (the "j" overflows the container while the "b" does not).
In the same way, you can move the box closer to the center by decreasing the font-size. Since you asked in comments, here's how you get it optimally centered with this method: Set font-size to 0 on the container.
.container{
height: 45px;
width: 100%;
line-height: 45px;
font-size: 0px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 40px;
background-color: green;
vertical-align: middle;
display: inline-block;
}
<div class="container">
job
<div class="item">
</div>
</div>
Changes in your style may help you
.container {
background-color: #ff0000;
display: table-cell;
height: 45px;
vertical-align: middle;
}
.item {
background-color: #008000;
display: table-cell;
height: 15px;
vertical-align: middle;
width: 15px;
}
Please use dividable size to make this work. Also remove vertical align attribue
https://jsfiddle.net/guc6uxc7/
.container{
height: 42px;
line-height: 42px;
background-color: red;
display: inline-block
}
.item{
height: 12px;
width: 12px;
background-color: green;
display: inline-block;
}
I've gone through the forum and seemed to have tried all the suggestions related to div layouts. I'm trying to get two rows of elements as follows:
Row 1 - Number > Image > Text.
Row 2 - (Blank Space to move second row right by the same amount of pixels as the above image) > Number > Image > Text.
This is my code that I've tried so far:
#import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);
body {
background-color: #f3eedd;
width: 750px;
overflow: scroll;
overflow-x: hidden;
}
h1 {
font-family: 'Londrina Sketch', cursive;
color: #c13e18;
font-size: 50px;
text-align: center;
margin: 0px 30px 0px 30px;
}
h2 {
font-size: 20px;
color: #c13e18;
margin: 10px 30px 10px 30px;
}
h3 {
font-size: 20px;
margin: 30px 30px 0px 30px;
}
h4 {
text-align: center;
}
p {
font-size: 20px;
margin: 0px 30px 0px 30px;
}
.choose {}
.number {
display:inline-block;
float:left;
}
.choose-image {
display: inline-block;
float: left;
}
.choose-text {
display: inline-block;
vertical-align: top;
float: left;
}
.customise {}
.empty-left {
display: inline-block;
width: 300px;
overflow: hidden;
}
.customise-image {
display: inline-block;
}
.customise-text {
display: inline-block;
vertical-align: top;
}
<h1>FROM BEGINNING TO END</h1>
<hr>
<h2>How many? What size? How old? When and why? How much?
If you’d like to learn more about group sizes, room dimensions, prices & age limits … this section must have your answer! However if you can’t find it, please don’t hesitate to drop us a line!</h2>
<hr>
<!-- choose -->
<div class="choose">
<div class="number">
<h4>1</h4>
</div>
<div class="choose-image">
<img src="http://www.challenge-the-box.com/wp-content/uploads/choose.png" alt="" />
</div>
<div class="choose-text">Choose text content goes here</div>
</div>
<div class="customise">
<div class="empty-left"></div>
<div class="number">
<h4>2</h4>
</div>
<div class="customise-image">
<img src="http://www.challenge-the-box.com/wp-content/uploads/customise.png" alt="" />
</div>
<div class="customise-text">Customise text content goes here</div>
</div>
Thanks!
u have a typo:
.number (
display: inline-block;
float: left;
}
change to:
.number {
display: inline-block;
float: left;
}
after it`s corrected it looks fine i think.
On your site, change this:
.customise {
float: left;
width: 100%;
}
.choose {
float: left;
width: 100%;
}
to that:
.customise {
float: left;
width: 50%;
}
.choose {
float: left;
width: 50%;
}
I'm not entirely sure what you're trying to achieve with your code. I'll let you into a little secret of mine ;)
I call it a split, which I can split into multiple columns and rows.
here's my CSS
.clearfix:after{clear:both;content:'';visibility:hidden;display:block;}
/*because floats have to be cleared. I use a simple clarify method
although this may cause problems in IE <8
*/
#media only screen and (min-width:600px){/*use this if you want the elements to only be in columns for desktop computers.*/
.split .splitOb{float:left;padding:1%;}
.splitOb.w1{width:8%;}
.splitOb.w2{width:18%;}
.splitOb.w3{width:28%;}
.splitOb.w4{width:38%;}
.splitOb.w5{width:48%;}
.splitOb.w6{width:58%;}
.splitOb.w7{width:68%;}
.splitOb.w8{width:78%;}
.splitOb.w9{width:88%;}
}
The to use this idea, just use this basic structure.
<div class="split clearfix">
<div class="splitOb w5">
this is on the left side
</div>
<div class="splitOb w5">
this is the right side
</div>
</div>
Bare in mind though that all splitOb or split objects must equal to 10. You can make different variations of this and even reverse the order of your rows.
little bit of maths to help :)
with the percentages, you want to equal 100%. As whatever the parent's width, a child element with width:100%; will equal 100% of the parent.
So lets say I use the above example, there are 2 .splitOb.w5 so that's 48% x 2 = 96% now there's padding on each side of 1%. 1% x 4 = 4%. 4% + 96% = 100%. It's the same with all the other widths.
Also, try not to use a pixel width on the body. I say this as there are so many different ratios out there, ranging from say 320px x 400px to 1440px x 900px and larger!!!
using a viewport with help you get the device's width
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
This will mean if you did this:
body,html{width:100%;margin:0px;padding:0px;}
Both the body and html will be 100% of the device's or browser's width.
Currently change add below style
.choose {
width: 50%; float: left;
}
.customise {
width: 50%;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);
body {
background-color: #f3eedd;
width: 750px;
overflow:scroll;
overflow-x:hidden;
}
h1 {
font-family: 'Londrina Sketch', cursive;
color: #c13e18;
font-size: 50px;
text-align: center;
margin: 0px 30px 0px 30px;
}
h2 {
font-size: 20px;
color: #c13e18;
margin: 10px 30px 10px 30px;
}
h3 {
font-size: 20px;
margin: 30px 30px 0px 30px;
}
h4 {
text-align: center;
}
p {
font-size: 20px;
margin: 0px 30px 0px 30px;
}
.choose {
width: 50%; float: left;
}
.number (
display: inline-block;
float: left;
}
.choose-image {
display: inline-block;
float: left;
}
.choose-text {
display: inline-block;
vertical-align: top;
float: left;
}
.customise {
width: 50%;
float: left;
}
.empty-left {
display: inline-block;
width: 300px;
overflow: hidden;
}
.customise-image {
display: inline-block;
}
.customise-text {
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<h1>FROM BEGINNING TO END</h1>
<hr>
<h2>How many? What size? How old? When and why? How much?
If you’d like to learn more about group sizes, room dimensions, prices & age limits … this section must have your answer! However if you can’t find it, please don’t hesitate to drop us a line!</h2>
<hr>
<!-- choose -->
<div class="choose">
<div class="number"><h4>1</h4></div>
<div class="choose-image">
<img src="http://www.challenge-the-box.com/wp-content/uploads/choose.png" alt="" /></div>
<div class="choose-text">Choose text content goes here</div>
</div>
<div class="customise">
<div class="empty-left"></div>
<div class="number"><h4>2</h4></div>
<div class="customise-image">
<img src="http://www.challenge-the-box.com/wp-content/uploads/customise.png" alt="" /></div>
<div class="customise-text">Customise text content goes here</div>
</div>
<!-- customise -->
</body>
</html>
Try display: table or just make a table, unless your'e concerned about semantics. I'm not sure what the space is for here's a DEMO
I made another version without that space it looks a lot better
This is driving me crazy I just don't understand why this piece of simple css to vertically center an element in a div doesn't work as expected.
this is the html:
<div class="header-a-wrapper" style="
line-height: 48px;
height: 48px;
background: red;
display: block;
text-align: center;
">
<a href="/user/5659186348163072" class="right" style="
background: blue;
line-height: normal;
display: inline-block;
vertical-align: middle;
float: none;
height: 20px;
">medical salamander</a>
</div>
the inner element does not get centered vertically but I really think it should
here is an html with the two elements:
http://alephz.com/test.html
and this is the CRAZY part. here is a jsfiddle with the same html and over there it works! tested on the same chrome/win7!
http://jsfiddle.net/pkrsdqkb/
Very weird, but if you want to solve it, you add to 'a':
position: relative;
top: 50%;
transform: translateY(-50%);
Remove
vertical-align: middle;
float: none;
One option to play nicely with vertical-align: middle is to use display: table and display: table-cell.
The wrapper gets display: table and width: 100%
Wrap the links in a div which will act as a "table cell" with display: table-cell
vertical-align: middle will now work as you expect it to.
Compatibility: display: table is good for IE 8 + and modern browsers everywhere.
Example:
.header-a-wrapper {
background: red;
display: table;
text-align: center;
height: 100px;
width: 100%;
}
.vertical {
display: table-cell;
vertical-align: middle;
}
.right {
background: blue;
display: block;
margin: 2px 0;
}
<div class="header-a-wrapper">
<div class="vertical">
medical salamander
medical salamander
</div>
</div>
Old answer
There is a lot of redundant CSS.
The vertical center is applied through: line-height: 48px.
Leave that on the wrapper and remove all the positioning CSS properties on a.right.
Example:
.header-a-wrapper {
line-height: 48px;
background: red;
display: block;
text-align: center;
}
.right {
background: blue;
}
<div class="header-a-wrapper">
medical salamander
</div>
I have a header on my site, and this has a container and three divs.
The heading container is 100px high.
The first div floats to the left and has a width of 150px
The second div floats to the right and has a width of 150px
The third div has another div inside it, and by default resizes to fill the remaining space.
I want the third div to center vertically. When I add display: table-cell and vertical-align: middle the div shrinks to the size of the text. I can only resize the div using a fixed size.
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
Can anyone let me know how I can center the middle div without knowing the exact width?
If I take out the display: table-cell from the heading class it is no longer centered vertically but is horizontally.
I think this might be what you're looking for... I changed div.header in the css to have padding on top, removed the table-cell and also set the margin to auto instead of width auto. See if this is what you were hoping for. You will have to adjust the padding on top depending on the spacing but this seems like the easiest way to me.
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
<div id="headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
I have now found an answer that works for me.
First a small change to the HTML (two extra divs in the heading):
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div>
</div>
Then change to the CSS:
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
background-color: #000;
margin-bottom: 10px;
width: 100%;
height: 100px;
}
div.heading
{
display: table;
border-collapse: collapse;
width: 100%;
height: 100px;
position: absolute;
}
div.heading div
{
display: table-row;
}
div.heading div div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
This allows the final div contain the text to be both centered vertically and also horizontally. The help came from another Stack Overflow question I found after more searching - 818725.
try this http://jsfiddle.net/KtgVN/20/