Let's say I have 2 divs inside a container div like so:
<div id="wrapper">
<div id="title">A</div>
<div id="text">Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... </div>
</div>
As you can see from the title, I'm trying to align the divs title and text vertically and next to each other inside the parent div wrapper. So far my css is this:
#wrapper
{
vertical-align:middle;
display:table-cell;
}
#title
{
background: url('path_to_purple_background') no-repeat;
width:45px;
height:45px;
color:white;
}
#text {
width: 700px;
}
#title, #text {
display: inline-block;
vertical-align: middle;
}
But what I get so far is that the letter A is not centered inside my div title (it is instead positioned at the top-left corner of the div). Does anybody have an idea how I can fix this?
Thank you
Just a thought, but there is a text-align:center property that you can add into #title as well as line-height:HEIGHT OF #TITLE; you can add. This will align the A to the center of the circle, as well as set the line-height of the A to match the height of the circle container, thus vertically aligning it to the middle.
How about something like this? I set the display property of #test, #title to table-cell.
The use of vertical-align gets mistaken very often.
From the W3C:
The vertical-align property affects the vertical positioning inside a
line box of the boxes generated by an inline-level element.
So if you have got an inline image in an paragraph, you can use it to vertical-align it within a rule of text.
In your case, if you need to vertical-align only one rule, you can use the old line-height trick:
#title {
height: 45px;
width: 45px;
line-height: 45px;
}
Related
I am trying to get my text element to be vertically centered in a larger div, which is colored in blue. I specifically defined the height and alignment as follows:
vertical-align: top; //middle actually puts it even lower
height: 83px; //the same as the larger area
However, I cannot get this to be vertically aligned in the center of the blue box. Any help would be appreciated!
You can do this in several ways:
center the division:
div.div{
text-align: center;
}
<div class="div">
Hello world!
</div>
Use a p tag to align the text to the center
div.div{
background-color: #00ff00
}
p.p{
text-align: center;
}
<div class="div">
<p class="p">Hello World!</p>
</div>
You can set the blue div position to relative then add the following to your test class :
.test{
position:absolute;
top:calc(50% - 38px); //76/2 = 38 to get the center of your span.
}
jsfiddle
I found my answer. I needed to simply add a text-bottom vertical alignment to the image that was a part of the light blue div. Thanks for the answers anyways guys!
Here's my stripped-down code:
<style>
div{
height:100px;
background-color:black;
}
span{
font-size:60pt;
background-color:yellow;
}
img{
height:100px;
background-color:yellow;
}
</style>
<div>
<span>ASDF</span>
<img src="foo"/>
</div>
(fiddle: http://jsfiddle.net/pM2jE/)
How come the "ASDF" is misaligned with the rest of the DIV??
I suspect, somehow, that the bottom of the word "ASDF" is aligning with the rest of the DIV, and so the SPAN as a whole doesn't actually match up. I have no idea how to fix this.
Add this css to your image class
vertical-align: top;
By default, the vertical-align for a span is "baseline", which will align the contained text to the bottom of the parent container. Adding a:
vertical-align: top;
CSS property will align the top of the text to the top of the containing div.
use float:left or float: right in your this might help you align your span and div
Want to know the reason for this behavior.
CSS
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Empty div
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
behavior: element increases from bottom to top (height)
div with text
<div style="height:20px;">20</div>
<div style="height:40px;">30</div>
<div style="height:60px;">40</div>
<div style="height:80px;">50</div>
behavior: element increases from top to bottom (height)
see it in action: http://jsfiddle.net/8GGYm/
Basically it got to do with the way that vertical-align: is calculated. So if you put vertical-aling:bottom; attribute in the css then you will notice it will be the same with and without text.
you can read the this for more details.
When the div has no content, padding is not drawn in the box (i.e. when when 0, if there is content, the browser calculates where the padding would be). so there is a little difference in calculating with and without text.
Hope this is helpfull.
please see here: http://jsfiddle.net/dd24z/. By default text is vertical-align: top, but you can change that behavior:
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
vertical-align: bottom;
}
http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height
'vertical-align': baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.
Add
vertical-align: bottom;
to your CSS. Hope it works as you want.
I guess this can be explained by the text alignment, independently from divs.
Text, when placed in a div, is vertically aligned to top-left by default. Those divs without text align beside each other (inline-block) expanding the page downwards. If you add another div, you'll see the second header going further down.
<h1>Empty div</h1>
Some text
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
continuing here
<h2>Div with text</h2>
Some text
<div style="height:20px;">20</div>
<div style="height:40px;">40</div>
<div style="height:60px;">60</div>
<div style="height:80px;">80</div>
continuing here
...
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Fiddle
In the above fiddle, you can see that the text line is the "guideline".
Maybe this is the explanation: once the divs have text in them, they will align it with the surrounding text and, if inexistent, then they align their bottom line.
I'm sorry, maybe not very clear but I hope you understand my view.
This is my html and css
<div id="name">
<p>TEST TEST TEXT</p>
</div>
#name{
width: 200px;
height: 50px;
background: #019fde;
border-radius: 10px;
}
How to set text in the middle (horizontally and vertically)?
If it's just one line you can use line-height. Set line-height to the same height as the element (50px in this case) and your text will be in the middle.
To align the text centrally, simply use text-align:center;
This will do it:
text-align: center;
display: table-cell;
vertical-align: middle;
http://jsfiddle.net/Z8S8H/
you could also not bother wrapping the p in a div and simply give the p tag consistent padding on the top and the bottom that will achieve your desired height while also setting text-align:center.
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.