Overview
I have an image with variable width aligned to the left, with text (having variable length) to the right of it.
I am trying to make the width of the right-most div element (containing the text) to fill the remaining width, centering the text both horizontally and vertically.
However, I cannot find a way to center align the text horizontally.
Code
As you can see by the code below, the text will only be centered in the rightmost div when the length of text flows over one line - however, in many instances in my project, the code is much smaller (this example is just "Centered Text") and the text is left-aligned:
<hr>
<div style="float:left; height: 75px;">
<img src="//i.imgur.com/rJD1cRy.png" style="margin:auto;display:block;">
</div>
<div style="width: 100%;">
<div style="display: table; height: 75px; overflow: hidden;">
<div style="font-style: italic; color: #777; display: table-cell; vertical-align: middle; text-align: center;">
Centered Text
</div>
</div>
</div>
<div style="clear: both;"></div>
<hr>
for centering the right-most div horizontally ,
adding margin:0 auto to the div should fix the issue:
<hr>
<div style="float:left; height: 75px;">
<img src="//i.imgur.com/rJD1cRy.png" style="margin:auto;display:block;">
</div>
<div style="width: 100%;">
<div style="display: table; height: 75px; overflow: hidden; margin:0 auto;">
<div style="font-style: italic; color: #777; display: table-cell; vertical-align: middle; text-align: center;">
Centered Text
</div>
</div>
</div>
<div style="clear: both;"></div>
<hr>
<hr>
<div style="float:left; height: 75px;">
<img src="//i.imgur.com/rJD1cRy.png" style="margin:auto;display:block;">
</div>
<div style="width: 100%;">
<div style="display: table; height: 75px; overflow: hidden; width: 60%;">
<div style="font-style: italic; color: rgb(119, 119, 119); display: table-cell; vertical-align: middle; text-align: center;">
Centered Text
</div>
</div>
</div>
<div style="clear: both;"></div>
<hr>
Related
I'm trying to vertically center certain items within a table cell. I've tried most solutions on stackoverflow and several other sites without any luck.
In this cell, the image is stuck at the top of the table cell, while the text is properly centered vertically:
<tr>
<td class='sidebar-middle'> <!--sets a left and right border-->
<a target="_blank" href="data/Standards.pdf">
<div style='width: 100%;text-align: center;overflow: hidden;'>
<div style='float: left;width: 34%; text-align: center;height: 100%;'>
<img src='images/logo.jpg' alt='Standards' style='width: 80px;vertical-align: middle;'/>
</div>
<p style='float: right; vertical-align: middle;width: 64%;'>Local Facility Standards to be Followed</p>
</div>
</a>
</td>
</tr>
However, using the same method, this DOES seem to work:
<tr>
<td class='sidebar-bottom'> <!--sets a left, right, and bottom border-->
<a target="_blank" href="Policies.html">
<div style='width: 100%;text-align: center;overflow: hidden;'>
<div style='float: left;width: 35%; text-align: center;height: 100%;'>
<img src='images/patch.png' alt='Policies' style='height: 80px;vertical-align: middle;'/>
</div>
<p style='float: right; vertical-align: middle;width: 64%;'>Policies</p>
</div>
</a>
</td>
In the first (frustrating) example, the image is 112 pixels in height, scaled down to 30. In the second (working) example, the image is 122 pixels in height, scaled down to 80. I suspect that image height has something to do with it, but can't get any further in resolving the problem.
While assigning classes to the elements I didn't see a change. When I replaced the <tr> and <td> with <div> and <section> it didn't change. It just works like the way you wanted it to. There's no style info provided for classes, .sidebar-middle and .sidebar-bottom so that might be your problem (or the rest of the code you neglected to post). Note: I didn't need to modify the div.C or the <section>s I added, so table components may have not been needed and the floats were sufficient.
When using inline styling heavily, your HTML gets cluttered and there's no easy way of fixing it should you have many lines of that coding disaster. As Paulie_D and hidanielle already stated, your vertical-align does not function on floated elements, and HTML table -layouts are so 90s. In the 21st century we use table-* CSS properties.
SNIPPET
.A {
width: 100%;
text-align: center;
overflow: hidden;
}
.B {
float: left;
width: 34%;
text-align: center;
height: 100%;
}
.img {
width: 80px;
height: 80px;
}
.note {
float: right;
width: 64%;
}
<div class='C'>
<section class='sidebar-middle'>
<a target="_blank" href="http://www.orimi.com/pdf-test.pdf">
<div class='A'>
<div class='B'>
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png' alt='Lenna' class='img' />
</div>
<p class='note'>Local Facility Standards to be Followed</p>
</div>
</a>
</section>
</div>
<div class='C'>
<section class='sidebar-bottom'>
<a target="_blank" href="http://www.example.com">
<div class='A'>
<div class='B'>
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png' alt='Lenna' class='img'>
</div>
<p class='note'>Policies</p>
</div>
</a>
</section>
</div>
Instead of floats, use CSS Tables (since you started with an actual table for layout).
* {
margin: 0;
padding: 0;
}
.inner {
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
overflow: hidden;
}
.left {
display: table-cell;
width: 34%;
text-align: center;
background: pink;
}
img {
width: 80px;
}
.right {
display: table-cell;
width: 64%;
vertical-align: middle;
background: lightblue;
}
<a target="_blank" href="data/Standards.pdf">
<div class="inner">
<div class="left">
<img src='http://www.fillmurray.com/80/80' alt='Standards' />
</div>
<p class="right">Local Facility Standards to be Followed</p>
</div>
</a>
I would like to accomplish a mix of horizontal and vertical layouts.
<div>
<div>
<span>A</span>
<span>B</span>
<span>C</span>
</div>
<div>
<span>D</span>
</div>
</div>
#1 It should look like this
A B C
<- D ->
#2 Instead I have the two div elements next to one another
A B C <- D ->
The real example has some very bad CSS that I recommend you not look at. I wanted to set the top three items to the same width of 25px and to be arranged next to one another. And a picture beneath the two control buttons.
For some reason, the div elements are not stacking on top of one another and instead sitting next to each other all in one row. Please help!
<div>
<div>
<button style="width: 25px; float: left;">-</button>
<span style="width: 25px; float: left; text-align: center;">0</span>
<button style="width: 25px; float: left;">+</button>
</div>
<div>
<img src="starry-night.jpg" width="500">
</div>
</div>
HTML:
<div>
<div>
<span>A</span>
<span>B</span>
<span>C</span>
</div>
<div>
<span>D</span>
</div>
</div>
CSS:
div {
width: 100%;
}
div > div {
display: flex; /* pertinent */
width: 100%;
}
div > div > span {
width: 33%; /* pertinent */
justify-content: center; /* pertinent */
margin: 1px auto; /* pertinent */
background: #333;
text-align:center;
color:#efefef;
font-family: sans-serif;
}
https://jsfiddle.net/16dqk7cL/1/
Give a width of 75 px to the parent div so that after placing 3, 25px elements the next element will be forced to be on the new line.
<div style="width: 75px;">
<div>
<button style="width: 25px; float: left;">-</button>
<span style="width: 25px; float: left; text-align: center;">0</span>
<button style="width: 25px; float: left;">+</button>
</div>
<div>
<img src="starry-night.jpg" width="500">
</div>
</div>
One of the possible solutions is to have a container Div and specify a width for it. Then adjust your other Divs width based on it.
<div style="width: 300px">
<div style="width=100%;">
<button style="width: 33%; float: left;">-</button>
<span style="width: 33%; float: left; text-align: center;">0</span>
<button style="width: 33%; float: left;">+</button>
</div>
<div style="width: 150px; margin:auto">
<img src="starry-night.jpg" style="width: 150px;">
</div>
</div>
I have input fields which are supposed to be shown centered and then the texts to these input fields are supposed to be aligned left and "start" with the input fields.
http://jsfiddle.net/tfbatp5v/2/
.inputdes {
color: #9b9b9a;
font-size:20px;
height: 200px;
}
.blue {
height: 70px;
}
<div align="center" id="parent">
<div class="welcome">Welcome</div>
<div class="inputdes">
<div class="blue">text1<br><input id="inputfield1" /></div>
<div class="blue">text2<br><input id="inputfield2" /></div>
<div class="blue">text3<br><input id="inputfield3" /></div>
</div>
</div>
However, no matter what I do, every time when I use text-align: left; it automatically aligns the inputfields left as well. I tried to group the text areas together with class names but it doesn't work. Does anyone know the answer?
Thanks !
It's recommended to not use align="center", because align attribute is deprecated. You should use the CSS text-align property on the container.
The rule display: table; will make the element to "shrink-to-fit" the content inside, without need to specify the width value.
#parent {
display: table;
margin: 0 auto;
}
.welcome {
text-align: center;
}
.inputdes {
color: #9b9b9a;
font-size: 20px;
height: 200px;
}
.blue {
height: 70px;
}
<div id="parent">
<div class="welcome">Welcome</div>
<div class="inputdes">
<div class="blue">text1<br><input id="inputfield1" /></div>
<div class="blue">text2<br><input id="inputfield2" /></div>
<div class="blue">text3<br><input id="inputfield3" /></div>
</div>
</div>
Try something like the following. The idea is that we limit the width of the .inputdes div, then put the text in a nested div that has text-align: left. That way we can have the inputs centered but the text aligned left within its div.
.inputdes{
color: #9b9b9a;
font-size:20px;
height: 200px;
width: 200px;
}
.inputdes > div > div {
text-align: left;
margin: 0 15px;
}
.blue{
height: 70px;
}
<div align="center" id="parent">
<div class="welcome">Welcome</div>
<br>
<div class="inputdes">
<div class="blue" ><div>text1</div>
<input id="inputfield1"/></div>
<div class="blue" ><div>text2</div>
<input id="inputfield2" /></div>
<div class="blue" ><div>text3</div>
<input id="inputfield3" /></div>
</div>
</div>
You could give the input around the fields a fixed width and give the inputs a width: 100% to use text-align: left.
.inputdes{
color: #9b9b9a;
font-size:20px;
height: 200px;
width: 200px;
text-align: left;
}
input {
width: 100%
}
.blue{
height: 70px;
}
<div align="center" id="parent">
<div class="welcome">Welcome</div>
<div class="inputdes">
<div class="blue" >text1<br>
<input id="inputfield1"/></div>
<div class="blue" >text2<br>
<input id="inputfield2" /></div>
<div class="blue" >text3<br>
<input id="inputfield3" /></div>
</div>
</div>
Here's the updated Fiddle:
https://jsfiddle.net/tfbatp5v/11/
can anyone tell me why #contHolder div doesn't get pushed up to the first row?
replacing the tables elements with "any text content" and everything is aligned properly.
<div id="footerWrapper"style="display: block; width:100%;">
<div id="firstCol" style="float:left; width: 30%;">
<div id="footerProjectTitle" style="float: left; width: 100%; background-color:red;">title</div>
<div style="clear:both"></div>
<div id="contHolder"style="float: left; width: 30%; background-color: #ffc0cb;">
<table>
</table>
</div>
</div>
<div id="secondCol" style="float:left; width: 30%;">
<div id="linkHolder"style="float: left; width: 100%; background-color: #f0ffff;">
<table>
</table>
</div>
</div>
</div>
here's a fiddle
http://jsfiddle.net/KzJN3/
updated fiddle:
http://jsfiddle.net/KzJN3/2/
thanks!
The problem is here:
<div class="noborder" style="clear: both; width: 100%; height: 0px; line-height: 0px; font-size: 0px;"> </div>
You told it to clear:both so any floats after this element will start on a new row.
Floats are a difficult topic, see: http://css-tricks.com/all-about-floats/ for some good information on them and how they work.
I know this question has been asked to death but nothing through searching has worked for me.
You know the deal, I have a div element that I need to vertically align text in but nothing has worked (position:absolute;top:50%;margin-top:-x;display:table-cell;vertical-align:middle;etc., etc.)
Here is what I am working with (sorry for the inline CSS). Anyway, the I would use line-height but the text can be one or two lines. It should vertical align with the image which is always max-height of 30px (30x50).
<div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;">
<div style="float:left;width:55px;height:40px;">
<img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" />
</div>
<div style="float:right;width:155px;font-size:0.7em;height:40px;">
This is the text to vertically align
</div>
</div>
One other thing you can do. If it's only one line of text in the div you can use line-height
example
div {
line-height:40px;
}
The idea is from here and should work for all browsers.
<div style="margin: 0 0 10px 0; padding: 10px; border: 2px solid #606060; background-color: #2b2b2b;
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;">
<div style="float: left; width: 55px; height: 40px;">
<a href="link">
<img style="max-width: 50px; border: 1px solid #ffb92c;" src="image.jpg"
alt="" /></a>
</div>
<div style="float: right; width: 155px; font-size: 0.7em; height: 40px; display: table; #position: relative; overflow: hidden;">
<div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;">
<div style="#position: relative; #top: -50%;">
This is the text to vertically align
</div>
</div>
</div>
<div style="clear: both"></div>
</div>
You need to do like this:
http://jsfiddle.net/rathoreahsan/5u9HY/
Use fixed height instead of padding in main div. and use line height for left & right Divs
Here is a clean version of the solution
<div style="background: yellow">
<div style="width: 155px; font-size: 0.7em; height: 40px; display: table; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<div style="">
This is the text to vertically align
</div>
</div>
</div>
<div style="clear: both"></div>
http://jsfiddle.net/5y4Nb/
Seems like a common float issue which can be fixed with a clearfix or, like i did in the following code snippet, with a fixed height of the wrapper.
I also sat an line-height of the floating divs and made it a little wider.
Take a look at this:
<div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;height:40px"> <div style="float:left;width:55px;height:40px;"> <img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /> </div> <div style="float:right;width:185px;font-size:0.7em;height:40px;line-height:40px"> This is the text to vertically align </div> </div>
http://jsfiddle.net/YqxPZ/3/
Is you need to show only a few lines of a very long text, here is the Fiddle. Adjust height according as needed.
.container-text {
height:40px;
width:180px;
overflow-y:hidden;
display:table-cell;
vertical-align:middle;
text-align: center;
}