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/
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
I have set up 2 div tags, the outer one with display:table and the inner one with display:table-cell. Inside these I have an image.
When I resize the box using jQuery UI's resizable() API, I am unable to shrink it smaller than the image.
Markup:
<div class="resizebox">
<div class="content">
<img src="http://placehold.it/300x60">
</div>
</div>
CSS:
.resizebox {
border:1px solid black;
height:100px;
width:320px;
overflow:hidden;
display:table;
}
.resizebox .content {
display:table-cell;
vertical-align: middle;
text-align: center;
}
jsFiddle
I've added another example under the top resizable box to demonstrate the kind of behavior I'm trying to achieve (while keeping the CSS Table)
You beat me to it. Just using regular 'ol width: 100%;
img {
width:100%;
}
Fiddle Example
Try adding the following css
.resizebox .content img {
width:100%;
max-width:100%;
}
JsFiddle
Feeling a big silly now.
Fixed this by adding these CSS Styles:
.resizebox img {
max-width:100%;
max-height:100%;
}
jsFiddle
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%;
}
I have that problem: I want to have a centered layout with or without a right-side sidebanner (it should float right to the content). so my css has to center content+sidebanner IN CASE there is a sidebanner tag or just the content (content and sidebanner have a fixed width) if there is no sidebanner tag - there are some pages where there should be the sidebanner and on some it isn't. css should format both possibilities well.
so it should like this:
<div id="wrapper"><div id="content"></div><div id="sidebanner"></div></div>
i tried a couple of things with floats and display:inline but it didn't really work out :(
Try this...
#wrapper {
position:relative;
left:50%;
margin-left:-500px;
width:1000px;
}
margin-left should be negative half of the width.
For the sidebanner, when its there, you can add a class .wsidebanner to the content block as follows:
<div id="content" class="wsidebanner"></div>
and the css would be:
#content {
background-color:#199;
}
.wsidebanner {
float:left;
width:800px;
}
#sidebanner {
background-color:#919;
float:right;
width:200px;
}
i would use following
#wrapper {
width:1000px;
margin:0 auto; //centering the wrapper
position:relative; //so we can position the ad absolutely
}
#sidebanner {
width:120px;
position:absolute;
top:0;
right:-120px; // same as width
}
Since selecting an element's parent is not possible with CSS, you'll have to add a class to the wrapper div when there's no sidebar.
HTML
<div id="wrapper">
<div id="sidebanner">...</div>
<div id="content">...</div>
</div>
<div id="wrapper" class="nosb">
<div id="content">C</div>
</div>
CSS
#wrapper {
width: 400px;
margin: 0 auto;
}
#wrapper.nosb {
width: 300px;
}
#content + #sidebanner {
margin-right: 100px;
}
#sidebanner {
float: right;
width: 100px;
}
See fiddle.
Note: IE6 doesn't support the adjacent sibling selector.