With the code below (and several other variations I've tried), when I shrink the browser window and my text becomes multi-lined, the next lines always falls below the image I have to the left of the text. How can I keep the resulting multi-line text vertically aligned next to the image? I've noticed plenty of solutions for single line text next to an image but haven't seen any for multi-line text.
<div id="printnotice" style="float:left;margin-top:5px;margin-bottom:10px;width:95%;text-align:center;">
<div style="float:left;margin:auto;display:block;">
<img style="align:left;vertical-align:middle;" alt="STOP" src="/Portal Content/Home/Stop">
<span style="margin-left:20px;font-family:Calibri;font-size:1.5em;">Required: Print Registration Information and Support Options and give to customer</span>
</div>
</div>
If you need the text on the right to be verticaly align next to the image, you can use display:table; and display:table-cell;
See this FIDDLE
HTML :
<div id="printnotice">
<div>
<span><img alt="STOP" src="http://lorempixel.com/output/food-h-g-198-256-8.jpg" /></span>
<span>Required: Print Registration Information and Support Options and give to customer</span>
</div>
</div>
CSS :
#printnotice {
float:left;
margin-top:5px;
margin-bottom:10px;
width:95%;
text-align:center;
}
#printnotice div {
float:left;
margin:auto;
display:table;
}
#printnotice span {
display:table-cell;
vertical-align:middle;
margin-left:20px;
font-family:Calibri;
font-size:1.5em;
}
Demo
You can do that floating the image and adding overflow: hidden to the text wrapper:
#printnotice img {
float: left;
}
#printnotice span {
overflow: hidden;
display: block;
}
Related
I cannot for the life of me get the contents of the center div to align no matter what I try:
HTML
<div class="content-controls">
<div class="content-controls-left">
123
</div>
<div class="content-controls-middle">
<img src="logo.png">
</div>
<div class="content-controls-right">
456
</div>
</div>
CSS
.content-controls {
width:100%;
}
.content-controls-left {
float:left;
width:50px;
}
.content-controls-right {
float:right;
width:35px;
}
.content-controls-middle {
float:left;
margin:auto 0;
}
What I would like to happen is that the image in the middle column is always centred in content-controls-middle - I have tried suggestions in:
CSS: center element within a <div> element
How do I put 3 div's side by side and center the content in each one
Three DIVs next to each other with fluid horizontal width
Align image in center and middle within div
and more but all to no avail - what am I doing wrong?
http://jsfiddle.net/8VS5U/
You'd be better off using a table layout if your middle cell will only contain inline content (which an image is):
/* Set container to display as a table. */
.content-controls {
display: table;
table-layout: fixed;
width:100%;
}
/* Set div elements within container to display as table cells. */
.content-controls div {
display: table-cell;
}
.content-controls-left {
width:50px;
}
.content-controls-right {
width: 35px;
}
/* Centrally align middle cell content. */
.content-controls-middle {
text-align: center;
}
JSFiddle demo.
You can change your CSS like this, it will allow the middle div to take the remainer space so you can just text-align the content.
CSS:
.content-controls {
width:100%;
}
.content-controls-left {
float:left;
width:50px;
}
.content-controls-right {
float:right;
width:35px;
}
.content-controls-middle {
text-align: center;
}
And you must change the HTML like so:
HTML:
<div class="content-controls">
<div class="content-controls-left">123</div>
<div class="content-controls-right">456</div>
<div class="content-controls-middle">ABC</div>
</div>
DEMO HERE
Try this: margin-left:40%; on your .content-controls-middle.
http://jsfiddle.net/8VS5U/7/
As James points out, if you make the window smaller, it won't be central. But this is good enough if you are not making a responsive website. I would prefer James' answer if you want a solid approach, and mine if you want a hacky way to do it :)
I've been having a problem with these boxes. The thing is that I need to make the text align always in the middle of the box + image no matter how many lines it has.
Have a look at the example bellow, many thanks:
HTML (I'm using 960 grid)
<div class="grid_4 prod-box-small alpha">
<h5>Shampoos</h5>
<div class="prod-img-box-small"><img src="images/product_small_1.jpg" alt="" /></div>
</div>
CSS
.prod-box-small {
border:1px solid #e4e4e4;
min-height:115px;
padding-right:12px;
padding-left:20px;
margin-bottom:20px
}
.prod-box-small h5 {
color:#820c8e;
float:left;
font-weight:600;
max-width:100px;
padding-top:42px;
padding-bottom:22px
}
.prod-img-box-small {
width:100%;
display: block;
padding:0;
max-height:105px;
margin-right: 0;
text-align: right;
line-height: 115px;
}
.prod-img-box-small img {
max-width:100%;
max-height:100%;
vertical-align: middle
}
Format the h5 using display:inline-block, so vertical-align can work on it, and give it a width - like this: http://jsfiddle.net/Cds5q/
(h5 and img elements are written without any whitespace between the tags here, otherwise you will get the width of a space character between them, and then they won’t fit into the div element exactly.)
stripped down to the important parts of the code: http://jsfiddle.net/aETC4/
you can use display: table for this. With vertical-align: middle your headline will be arranged centered inside the imaginary cell
simplest way us use margin-left: and margin right in percentage. you can check percentage value by debugger tool.
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/
Ok so I have a an anchor element within a div with a fixed width, the anchor element needs to remain inline because the text that it holds is dynamic and it has a background because it is a button. I want the background of the button to only be the size of the length of text too. Is there a way to do so?
<div class="wrap">
<a class="button>Start »</a>
</div>
.wrap{
width:900px;
background:white;
}
a{
display:inline;
background:black;
}
I think
.wrap{
width:900px;
text-align: center;
}
will do the trick
See
http://jsfiddle.net/jEsRG/3/
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%;
}