This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
Im creating a new website and i need to know something(will show with example).
Lets say i did this:
html;
<div id="center-in-bar">
<ul>
<li>content..</li>
<li>content..</li>
<li>content..</li>
<li>content..</li>
</div>
and css:
#center-in-bar {
list-style:none;
display:inline-block;
/*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/
}
What do I do to make all the li elements centered both horizontal and vertical? In the center-in-bar element?
Any help would be appriciated :))
Try this CSS snippet:
#center-in-bar ul {
...
text-align:center; /* center horizontally */
vertical-align:middle; /* center vertically */
...
}
#center-in-bar li {
...
display:inline; /* you might want to use this instead of "inline-block" */
...
text-align:center; /* center horizontally */
vertical-align:middle; /* center vertically */
...
}
Somehow, there's still no standard for doing this, but in my experience the following is probably the most reliable solution overall:
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
height:200px;
width:100%;
border:1px solid #000;
}
#layout {
display:table-row;
}
#content {
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div id="container">
<div id="layout">
<div id="content">
Hello world!
</div>
</div>
</div>
Here's another technique that utilizes relative and absolute positioning to simulate centered-middle position. This technique is not exact, but it should be compatible with any browser (even the early ones):
<style type="text/css">
#vertical{
position:absolute;
top:50%; /* adjust this as needed */
left:0;
width:100%;
text-align:center;
}
#container {
position:relative;
height:200px;
border:1px solid #000;
}
</style>
<div id="container">
<div id="vertical">
Hello world!
</div>
</div>
Important note:
When this question gets asked someone always seems to suggest line-height as a solution, but I would implore you to steer clear of that suggestion. It looks good when you're demonstrating something simple like "Hello World," but line-height breaks horribly when the text wraps.
HOW TO HORIZONTALLY CENTER A BLOCK ITEM (LIKE A DIV) OR INLINE ITEM (LIKE TEXT)
Let's say you wanted to center a document on a browser page, so that no matter how big you resize your browser the element is always centered:
body {
margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
write this HTML for centering something horizontally in between your body tags:
<body>
<div id="Content">I am a centered DIV</div>
</body>
This will horizontally center block level elements. To center text, spans, or other inline elements all you would need to add is:
#Content {
width:500px;
margin:0px auto;
text-align:center; /* THIS IS THE ONLY CHANGE FROM ABOVE */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
HOW TO VERTICALLY CENTER A BLOCK ITEM (LIKE A DIV) OR INLINE ITEM (LIKE TEXT)
Note: Do not use line-height to vertically center elements, as it will only work for one line of text and nothing more.
As for vertically centering items, there are 3-5 methods you can use depending on what it is you are trying to center.
This site describes each method easily for you:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Best of luck!
You should give same value to line-height and height.
#center-in-bar li
{
height: 30px
line-height: 30px;
text-align: center;}
also look at this: Text align vertical within li
Related
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 8 years ago.
I have a very simple layout that I am trying to achieve in CSS, but I am not having any luck. All I want to do is (horizontally) center a div that contains a link. The size of the div should be based on the size of its content.
I have tried a bunch of combinations of auto margins, text alignments, and display types, but can't seem to figure it out (I am a CSS noob). I have cooked up a very simple case (and the best I can do)
HTML:
<body>
<div class="myDiv">
google.com
</div>
</body>
CSS:
.myDiv
{
background:lightblue;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.myDiv a
{
text-decoration:none;
}
I have made a Fiddle as well. Is this type of layout possible without complicated HTML/CSS /hacks?
You just can do this:
.myDiv
{
display:table;
margin:auto;
}
View the demo http://jsfiddle.net/VvL6M/9/
Why not just apply the styles to the anchor tag itself;
Fiddle
.myDiv {
text-align:center;
}
.myDiv a {
text-decoration:none;
background:lightblue;
padding: 5px;
}
How about this:
#container
{
text-align:center;
}
.myDiv
{
background:lightblue;
display:inline;
}
.myDiv a
{
text-decoration:none;
}
And:
<body>
<div id="container">
<div class="myDiv">
google.com
</div>
</div>
</body>
Check out this JFiddle: http://jsfiddle.net/VvL6M/11/
I want to center text vertically aligned without using the box property because It does not work in IE9 so I have read it. I have only IE 10 here...
http://jsfiddle.net/J8rL7/6/
I have also tried display:table-cell and vertical-align:middle but this destroyed the whole layout.
Are there any vertical align tricks for my scenario which support IE9+, Chrome/Firefox (latest).
<div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
<div style="width:50px;height:100%;">
<div class="fluid-column" style="height:80%;background-color:green;">
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff99cc;height:25%;">1</div>
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff33cc;height:50%;">2</div>
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff66cc;height:25%;">3</div>
</div>
<div class="fix-column" style="height:20%;background-color:violet">
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:orange;height:50%;">Total</div>
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:blue;height:50%;">Test</div>
</div>
</div>
</div>
Let's update this and go old ways, so older IEs should come in the run too:
Let's use specifitie of inline-boxes and use one inline-level empty element to secure vertical-align.
DEMO to test : http://jsfiddle.net/D9gnP/6/ - http://jsfiddle.net/D9gnP/6/show.
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
div {
text-align:center;
/* text-indent:-0.5em; to swallow word spacing , should be right value */
}
div span {
display:inline-block;
height:100%;
vertical-align:middle;
width:0;/* no need to have a width, it's got be invisible */
margin:0 -5px;/* this will reduce effect of word spacing to none, it can be a little oversized */
}
If you want to use table-cell, you need to start from the main container drawing the column. and end up with table-cells to use the vertical-align rule.
I added an extra span to get to it :
http://jsfiddle.net/D9gnP/
.fluid-column,
.fix-column{
display:table-row;
width:100%;
}
.fluid-column > div,
.fix-column > div{
display:table;
height:100%;
width:100%;
}
.fluid-column > div > span,
.fix-column > div> span {
display:table-cell;
vertical-align:middle;
}
I just added "text-align: center;" in div tag.
It is done, check below link..
http://jsfiddle.net/J8rL7/15/
http://jsfiddle.net/J8rL7/24/
If you look at http://www.vanseodesign.com/css/vertical-centering/ and the heading: Absolute Positioning and Stretching
It requires adding a span around each text field, and a couple of classes
.vert {
position: relative;
}
.span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 90%;
height: 30%;
margin: auto;
}
I've used this trick before for vertical alignment:
HTML:
<div id="container">
<div class="center">vertically centered content</div>
</div>
CSS:
#container { white-space:nowrap; height:200px; }
#container:before { content:""; display:inline-block; width:0; height:100%; vertical-align:middle; }
.center { display:inline-block; vertical-align:middle; white-space:normal; }
This creates a pseudo-element before the element with class="center" and uses inline-block so the vertical-align style takes effect.
Here's a jsfiddle so you can check if it works for you: http://jsfiddle.net/Etzpj/
I think that in your case you would need to wrap the text on each cell with another element for this trick to work.
Edit: here i used this trick in your fiddle http://jsfiddle.net/J8rL7/25/
This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>
CSS
#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post
I'm using the technique in Stack Overflow question CSS centering text between two images but am unable to make the text center.
I would like the text "0 of 0" centered in this markup (as a fiddle):
HTML:
<div id="invoiceImageContainer">
<img src="http://i.imgur.com/8QT8u.png" id="invoiceImage">
<div id="invoiceNav">
<img title="Next" src="http://i.imgur.com/oZb7r.png" id="nextInvoice">
<img title="Previous" src="http://i.imgur.com/aKi11.png" id="prevInvoice">
<span id="invoiceCount">0 of 0</span>
</div>
</div>
CSS:
#invoiceImageContainer{
width:420px;
margin: 0 auto;
}
#invoiceImage {
height:600px;
}
#invoiceNav {
color:black;
font-size:10pt;
}
#prevInvoice {
float:left;
padding-left:100px;
}
#nextInvoice {
float:right;
padding-right:100px;
}
#invoiceCount {
text-align:center;
}
What am I doing wrong?
You are using a span for the text container which is an inline element. Therefore its width is the same as the width required for its content, changing it to a p (or changing display to block) will allow for horizontal centering. If you want to center vertically then set the line-height equal to the height of the images and set vertical-align: middle.
Updated fiddle: http://jsfiddle.net/W5jQd/3/.
Good old quick hack:
#invoiceImageContainer{
width:420px;
margin: 0 auto;
}
#invoiceImage {
height:600px;
}
#invoiceNav {
color:black;
font-size:10pt;
text-align:center;
}
#prevInvoice {
float:left;
padding-left:100px;
}
#nextInvoice {
float:right;
padding-right:100px;
}
#invoiceCount
{
line-height: 35px;
}
In your original markup you had #invoiceCount set to text-align:center. This is wrong because you can't center spans in that way, so I moved it to your container div.
The quick hack is the line-height, set to approximately the known size of your image. This technique is good and safe when you are doing a single line of text and the size of the elements involved is known.
This will fix it:
/* should be block level element */
#invoiceCount{
display: block;
}
See here: http://jsfiddle.net/W5jQd/5/
You could add the following to the CSS of #invoiceNav
text-align: center;
line-height: 32px;
the first centers the <span> element and the second centers the text vertically in the <div> (same height as the images)
The problem is caused by the fact that doesn't support "width", since it's an inline block. The following changes will do the trick: in HTML change <span id="invoiceCount">0 of 0</span> to <div id="invoiceCount">0 of 0</div> and in CSS add width to the #invoiceCount like this:
#invoiceCount {
text-align:center;
width: 100%;
}