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.
Related
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.
I have a short text next to which I have to put a link. The link should not be visible as a text but as an image. So far no problems, however to use the image I have to set display:inline-block to be able to set the width/height of the tag. As soon as I do it, the next which was next to from the right jumps downwards in the containing div. I am absolutely unable to move it upwards. The code is:
<div>
<p id="pid">Some prefixing text that shouldn't be at the bottom of the div but rather in the middle This is some link</p>
</div>
#pid {
border: 1px solid blue;
float: right;
}
#pid a {
display: inline-block;
width: 50px;
height: 53px;
}
http://jsfiddle.net/DxVQr/1/
So how could I move the prefix text upwards? Thanks a lot!
Does vertical-align: middle on the <a> tag does the job?
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;
}
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.
<div style='height:200px;'>
SOME TEXT
</div>
how do i align "SOME TEXT" at the bottom of the div using CSS without padding?
The absolute easiest way, though not-exactly using your code example, would be:
div {height: 400px;
width: 50%;
margin: 0 auto;
background-color: #ffa;
position: relative;
}
div p {position: absolute;
bottom: 0;
left: 0;
right: 0;
}
html
<div id="container">
<p>SOME TEXT</p>
</div>
Wrap your text in an element, anything from <p>, <span>, <div>...whatever, and position that element at the bottom of its container.
You can't do it in a simple way, at least not cross browser.
You can use the display: table; vertical-align: center;
You can use JS/ CSS expressions.
You can have another element inside the div, and position it absolute in relation to the div:
<div style='position:relative;'>
<div style='position: absolute; bottom:0;>
My Text
</div>
</div>
But really, as much as I hate to say, Tables is the KISS here (if you need to veritcaly center it).
TDs can vertically align text with vertical-align, but this does not work on DIVs. It is not considered good style to use tables to vertically align elements.
You cannot vertical-align text within DIVs with CSS. You can only use padding, margin, or absolute and fixed positioning to align an text vertically.
If you use absolute positioning well, you can vertically align the text by vertically aligning a container that the text is in. However, absolutely positioned elements do not take up "space" within their container, which means you have to set a margin or padding to offset that space in the container.
Eg:
HTML:
<div id="container">
<span id="text">Some text, Some text, Some text, </span>
</div>
CSS:
#id {
position:relative;
margin-bottom: 100px;
}
#text {
position:absolute;
bottom:0;
height: 100px;
overflow:hidden;
}
# id{
display:table-cell;
vertical-align:bottom;
}
Using flex, supported in most recent browsers
div {
align-items: center;
background: red;
display: flex;
/* Uncomment to align it horizontally */
/* justify-content: center; */
}
<div style='height:200px;'>
SOME TEXT
</div>