First of all, my apologies. I know there are various solutions posted for this issue here, but for the life of me I can't get any of them to work.
For a responsive website I'm trying to center an h1 in a div.
Centering horizontally is not an issue, but I'm having problems getting it centered vertically. Presumably I'm doing something wrong or misunderstanding the explanations I found here (or maybe both).
So as I'm probably interpreting earlier solutions given the wrong way, could someone please explain what exactly I have to add to the code beneath to get the h1 to center vertically?
(To make this question relevant to as much people as possible, I've already stripped the code of all my previous attempts to do so myself.)
CSS:
html, body {
height: 100%;
margin: 0;
}
#section1 {
min-height: 90%;
text-align:center
}
HTML:
<div class="section" id="section1">
<h1>Lorem ipsum</h1>
</div>
you can achieve vertical aligning with display:table-cell:
#section1 {
height: 90%;
text-align:center;
display:table;
width:100%;
}
#section1 h1 {display:table-cell; vertical-align:middle}
Example
Update - CSS3
For an alternate way to vertical align, you can use the following css 3 which should be supported in all the latest browsers:
#section1 {
height: 90%;
width:100%;
display:flex;
align-items: center;
justify-content: center;
}
Updated fiddle
You can achieve this with the display property:
html, body {
height:100%;
margin:0;
padding:0;
}
#section1 {
width:100%; /*full width*/
min-height:90%;
text-align:center;
display:table; /*acts like a table*/
}
h1{
margin:0;
padding:0;
vertical-align:middle; /*middle centred*/
display:table-cell; /*acts like a table cell*/
}
Demo: http://jsfiddle.net/a3Kns/
I've had success putting text within span tags and then setting vertical-align: middle on that span. Don't know how cross-browser compliant this is though, I've only tested it in webkit browsers.
HTML
<div id='sample'>
<span class='vertical'>Test Message</span>
</div>
CSS
#sample
{
height:100px;
width:100%;
background-color:#003366;
display:table;
text-align: center;
}
.vertical
{
color:white;
display:table-cell;
vertical-align:middle;
}
Fiddle : Demo
Flexbox is a solid well-supported way to center an h1 tag inside div.
<div class="section" id="section1">
<h1>Lorem ipsum</h1>
</div>
This is the OP:s HTML. Let's keep it like that.
Now working with CSS we can add display flex and some properties. Here is a working code snippet that shows how flexbox can do vertical alignment.
#root {
width: 90vw;
height: 90vh;
border: 2px solid green;
}
#section1 {
display: flex;
flex-direction: row;
flex: 1;
min-height: 90%;
border: 2px solid red;
background-color: orange;
text-align: center;
/* this does align h1 if h1 is wider than its containing text */
}
#section1>h1 {
flex: 1;
/* this makes the h1 take all available width in its containing div, and makes text-align: center property work inside section1 */
background-color: #666333;
align-self: center/* this is finally the property that vertically aligns the h1 title inside its containing div */
}
<!DOCTYPE html>
<html>
<header>Demo</header>
<div id="root">
<div id="section1">
<h1>Title Centered</h1>
</div>
</div>
</html>
Since the accepted answer's CSS3 option vertically aligns the containing div and not the h1 tag as requested, this answer shows how that h1 can be vertically aligned inside a pre-sized, larger containing div.
Just use padding top and bottom, it will automatically center the content vertically.
Related
I have been searching for an answer for this for days now and no solution seems to be the correct one for my needs. Please help!
I have two divs for which I want to fill 100% width of the browser, and have more of these which will stack to fill the height. I want the text in each of these (which is being generated from javascript ) to be vertically aligned.
I have also tried using display:table-cell and it works great in all ways, however I do not have the ability to set the cell width as a fixed %, and I need to add html markup which seems to limit me in using certain media queries later on.
How can I vertically align text using inline-block?
Im having trouble making a fiddle but this is close: http://jsfiddle.net/z4bj14op/
Here is my CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
font-family: helvetica;
}
#status {
width: 100%;
font-size: 0;
}
#line0, #status0 {
display: inline-block;
width: 50%;
vertical-align: middle;
height: 10%;
}
h2 {
font-size: 18px;
}
#line0 {
background-color: #B36305;
color: white;
}
#status0 {
background-color: black;
color: white;
}
And the HTML
<div id ="status">
<div id="line0"></div>
<div id="status0"></div>
</div>
There is an article from Steven Bradley 6 Methods For Vertical Centering With CSS: http://www.vanseodesign.com/css/vertical-centering/
Which solution would be the best depends on your requirements. I think the Absolute Positioning and Negative Margin way could be the solution you need, as your container have a defined height.
When using display:inline-block;vertical-align:middle the element is only vertically centered to the other inline-elements of the current row.
is this what you want ?
JSfiddle Example
If you want both of the divs to be 100% in their width that impossible ! otherwise the rest of the div will hidden by the other one
clarify more what's needed ..
<div id ="status">
<div id="line0"><h2>Bakerloo</h2></div>
<div id="status0"><h2>Good Service</h2></div>
</div>
css code:
#line0{
background:pink;
width:50%;
display: inline-block;
}
#status0{
background:red;
width:49%;
display: inline-block;
}
Why are you using display: inline-block? must you use this way? try to put float: left instead display: inline-block inside block #line0,#status0 and after you can work with text-something else
You Can try this
#line0{
background:pink;
width:50%;
display: inline-block;
float:left;/*added*/
}
#status0{
background:red;
width:50%;
display: inline-block;
}
DEMO
I've seen plenty of solutions if the child div has a fixed width, but not if it is fluid.
The parent div should have a fixed height (150px) and fluid width (80%).
The child div should have a fluid height (expands with content) and fluid width (always 100%).
I want to get the child div to vertically align within the parent div. All content within the child div should also be horizontally centered.
Here's what I have right now:
http://jsfiddle.net/6986r/
<div class="s1">
<div class="centereddiv">This green div should be vertically centered.</div>
</div>
-
body, html {
height: 100%;
margin: 0;
}
.s1 {
width:100%;
height: 150px;
display: block;
background-color: red;
float: left;
}
.centereddiv {
color: black;
text-align: center;
background-color: green;
}
If you do not mind older browser, you may use the display:flex property (aside the table property already proposed by #SW4)
Notice that display:table can be used as a fall back for older browser
DEMO
Basic update to your CSS:
.parent {
display:flex;
}
.childcentereddiv {
margin:auto;
}
Likely the most flexible implementation would be to leverage display:table, however you will also need to adapt your HTML slightly and add an additional parent:
Demo Fiddle
<div class="table">
<div class="cell">
<div class="childcentereddiv">This green div should be vertically centered.</div>
</div>
</div>
CSS
body, html {
height: 100%;
margin: 0;
width:100%;
padding:0;
}
.table {
height: 150px;
background-color: red;
display:table;
width:80%;
}
.cell {
display:table-cell;
vertical-align:middle;
}
.childcentereddiv {
color: black;
text-align: center;
background-color: green;
}
Creating a gallery of divs with links images and text. problem is- can't get the inner wrapper to center everything. margin:0 auto; isnt working because i havent set a width for it. but i want the width to change with different browser sizes but that the inner .prjctwrap divs will be centered within it. here's my markup:
HTML :
<div id="wrapper">
<div id="innerprjctwrap">
<div class="prjctwrap">
<a href="http://www.google.com">
<div class="imageCont" style="background-image:url(image1.jpg);">
</div>
<div class="text">Text Text Text</div> </a> </div>
...this reapeats from prjctwrap with other images, text and links
</div></div>
CSS:
#wrapper {
background-color: #FFFFFF;
width:100%;
height:1000px; }
.prjctwrap {
display:inline-block;
width: 130px;
height:180px;
overflow:hidden;
margin:15px; }
.prjctwrap .imageCont{
width: 130px;
height: 100px;
background-size: cover; }
.prjctwrap .text {
text-align: center;
color: black;
text-decoration: none;
height:80px; }
.prjctwrap a {
text-decoration:none; }
#innerprjctwrap {
margin:0px auto; }
You haven't set any size on the #innerprjctwrap element, so it will have the default setting width: auto;. That means that it will use the full width available, so you can't see that it's actually centered.
Set a width on the element, and you will see that it is centered:
#innerprjctwrap {
width: 130px;
margin: 0 auto;
}
If you want to use text alignment to center the content inside the element, you shouldn't use margins to center the element, you should use text-align to center what's inside it:
#innerprjctwrap {
text-align: center;
}
Add a width for #innerprjctwrap other ways margin:0 auto; not detected
Eg:
#innerprjctwrap {
margin:0px auto;
width:200px;
}
Using JsFiddle for explaining such problems will be much clear.
Is this fiddle what you want?
If so, then you want is actually to center elements inside #innerprjctwrap like #Guffa says, simply add:
#innerprjctwrap{
text-align:center;
}
add width. if no progress, try removing 'px'. if there's still no progress, use padding in the wrapper div.
Creating a page layout using inline-block elements (vertically aligned to the top). The only issue, is that inline-block elements below another set of inline block elements will not fold into open space like floated elements do. It's almost as if it obeys row-like rules. Are there any fixes for this?
Layout example in JSFiddle
CSS
* {
font-family:helvetica;
font-size:18px;
}
.container {
margin:0 auto;
width:90vp;
}
.main_content {
background:red;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
width:76.04%;
min-height:200px;
}
.content_details {
background:blue;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
width:22.39%;
margin-left:01.56%;
min-height:250px;
}
.comments {
background:green;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
width:76.04%;
min-height:150px;
}
HTML
<div class="container">
<div class="main_content">
<h1>Main Content</h1>
</div
><div class="content_details">
<h2>Details</h2>
</div
><div class="comments">
<h2>Comments</h2>
</div>
</div>
Please note I can change the mark-up to create only two inline-block elements (creating two columns), however I would like to know if there is a fix for 3 separate inline-block elements (like in the JSFiddle example), that way I wouldn't need to add extra mark-up.
No there isn't.. Not like you are talking about. You'd have to use:
<div id="col1">
<div id="maincontent"></div>
<div id="comments"></div>
</div>
<div id="details"></div>
Then you would have #col1 and #details as inline-block elements.
The whole point of an inline-block is that it is inline (i.e. on a line with other elements) it isn't acting like a table as you suggested, it's acting like a line of text (as it should) that is wider than it's container and breaking to the next line down.
See here: http://jsfiddle.net/GXmM6/ for a working example
Neither floats nor inline-block will do what you want there, unless you wrap each column in its own div. Short of that, there are JavaScript solutions for doing this, such as Masonry. (It involves a lot of positioning, though.)
Did I get it right that you wanted the .content_details to be a sidebar? Then I just changed it from display: inline-block to float: right to place .comments seamlessly beneath your .main-content. See http://jsfiddle.net/koivo/7UqqF/ for working example. Think that even works just with display: block ...
* {
font-family: helvetica;
color: white; /* added */
font-size: 18px;
}
.container {
margin: 0 auto;
width: 90vp;
}
.main_content {
background: red;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 76.04%;
min-height: 200px;
}
.content_details {
background: blue;
/* display: inline-block; */
float: right; /* added */
vertical-align: top;
box-sizing: border-box;
width: 22.39%;
margin-left: 01.56%;
min-height: 250px;
}
.comments {
background: green;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 76.04%;
min-height: 150px;
}
I have following html site structure:
<body>
<div id="header"></div>
<div id="container">
<div id="util_header"></div>
<div id="contentwrapper" class="frontpage">Content</div>
</div>
</body>
Now I want to center the #container. The works when I apply following css:
#container {
width: 960px;
margin: auto;
background:red;
}
#util_header{
width: 100%; height:32px;
position: relative;
background:url('../images/logo.png') no-repeat #eeeeee;
border-top:1px solid #b6bac0;
}
#header {
width: 100%; height:32px;
position: absolute;
background:#eeeeee;
border-top:1px solid #b6bac0;
}
#contentwrapper {
float: left;
position: relative;
height: auto;
background:red;
}
The magin: auto; centers the container. My problem is that I need the container to be larger, but when I increase width from 960 to 980 I get a vertical scrollbar. I played around with the css but got no clue how to manage that problem.
Any ideas?
#ArtWorkAD,
CSS3 introduced the Flexible box model, maybe you can use it depending the audience of your website...
So to Vertically & Horizontally center block Level elements in the body element, you'd just have to write this CSS declaration:
body {
display: box;
box-orient: horizontal;
/* horizontally centered */
box-pack: center;
/* vertically centered */
box-align: center;
width: 100%;
height : 100%;
}
http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
edit
To have wide browser support, you can always rely on CSS hacks and do some negative margin trickery as seen on http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
;)
Oh and if you don't want a scrollbar at all, make sure you have put an overflow:hidden on the body element.