I did little boxes on my website to shortly describe our activity, The text is that the same length for all the boxes so I am trying to center the text in the middle of the box with my css. I tried display:table-cell, vertical-align:center, but it doesn't work.
Did someone has an idea about what I can do?
Thank you :)
You need to add display: table; to the text container and
display: table-cell;
vertical-align: middle;
text-align:center;
to your text span/h1/p
body {
width: 100%;
height: 100%;
}
div {
position: absolute;
height: 50%;
width: 50%;
display: table;
background: blue;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<body>
<div>
<h1>Text</h1>
</div>
</body>
You need to add your code and be very specific about the question next time.
In css,
.text-center {
text-align : center;
}
Add a class .text-center to you div.
Related
W3School says :
When we use vertical-align:middle; The element is placed in the
middle of the parent element
So I tried to do that, But didn't get desired outcome
CODE :
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
vertical-align: middle;
}
p {
vertical-align: middle;
}
<div>
text
<p>
yo bro
</p>
</div>
Why m I not getting the desired outcome ?
because vertical-align only applies to inline level and table-cell elements. Both div and p are block level elements.
Applies to inline-level and table-cell elements. It also applies to
::first-letter and ::first-line.
MDN Source
With that in mind and using your example make your div a table and your p a table-cell
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
display: table
}
p {
vertical-align: middle;
display: table-cell;
}
<div>
<p>
yo bro
</p>
</div>
NOTE: Don't trust W3Schools as source, instead use MDN or W3C Specs
There are a couple of problems with your posted code.
Firstly, you haven't really explained what your desired outcome is so it's hard to help you with your specific problem.
Assuming you want to align the paragraph text with the other text in the div, you'll have to add display:inline-block; to your paragraph. Then, the trick with vertical aligning is to use line-heightas well as height. Set them both the same and voilá, things line up nicely.
div{
height: 200px;
width: 500px;
line-height:200px;
background: red;
text-align:center;
vertical-align: middle;
}
p{
display:inline-block;
padding:0;
margin:0;
}
codepen here
Add to div in css display: table-cell ;
div {
display: table-cell;
height: 200px;
width: 500px;
background: red;
text-align:center;
vertical-align: middle;
}
p {}
try using, line-height in styling, as shown below, or fiddle link
div{
height: 200px;
width: 500px;
background: red;
text-align:center;
vertical-align: middle;
}
p{
/* vertical-align: middle; */
line-height: 100px;
}
<div>
text
<p>
yo bro
</p>
</div>
If you wanted to use FlexBox you could do it this way.
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
This makes things centred both ways. If you want it just to be the height then delete justify-content. Note that you need to do flex-direction: column in this example to make the content go down the page and not sit side-to-side.
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<div>
yo
<p>bro</p>
</div>
I need to horizontally and vertically center text in a paragraph. The paragraph itself must fill 100% of the available height and width of the parent element without setting an explicit/static width for the paragraph (percentage like 100% is acceptable).
HTML
<div>
<p>Sudo make me a sandwich.</p>
</div>
CSS
div
{
background-image: url('idahoisntafraidofgorillas.png');
height: 138px;
width: 100%;
}
p
{
display: table-cell;
text-align: center;
vertical-align: center;
}
Ideally this should not require anything greater than CSS level 2. The current code doesn't actually center the text unless I set a static width however that would spam up the CSS I'm working on so I'm seeking a more elegant and proper solution.
Try vertical-align: middle also add display: table to div
div {
height: 138px;
width: 100%;
border: 1px solid black;
display: table;
}
p {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div>
<p>Sudo make me a sandwich.</p>
</div>
Set the line-height, vertical-align:middle;, and make sure there is no extra margin, margin:0px; all on the paragraph element.
div {
height: 138px;
width: 100%;
border: 1px solid black;
}
p {
margin:0px;
line-height:138px;
text-align: center;
vertical-align: middle;
}
<div>
<p>Sudo make me a sandwich.</p>
</div>
I've centered my text in my div but I've only managed to center it horizontally by using text-align: center
However I'm having trouble centering the text vertically. I've tried using vertical-align: middle; but it didn't work
Here is a codepen: http://codepen.io/anon/pen/Ioiaq
the code with the text is right at the bottom of the html panel the text is "INFO"
and here's the code so far:
<div id="inf" style="
text-align:center;
background-color: white;
position: absolute; top:50%; left: 45%; width: 10%; height: 6%;
z-index: 10;
display: inline-block;">
<span>INFO</span>
</div>
any ideas?
I don't mind what code is used to fix the alignment it doesn't have to be css.
To center a single line vertically, you can use CSS line-height whith the same value as the height value you are using.
line-height with a vertical-align: middle; is probably the best way to go if you aren't using JS.
FIDDLE
HTML:
<div id="inf">
<span>INFO</span>
</div>
CSS:
#inf {
text-align:center;
background-color: white;
z-index: 10;
display: inline-block;
width: 100%;
line-height: 400px;
vertical-align: middle;
}
You could use the CSS property vertical-align.
vertical-align: middle;
the title pretty much sums it up. I have the following code:
<div class="container">
<p>Hello world</p>
</div>
And CSS:
.container{
width: 100%;
height: 50px;
background-color: lightblue;
vertical-align: middle; /* Why you no work!?!? */
}
But the text is not vertically aligning in the div. I'm clearly missing something here or don't understand a certain concept. Anybody tell me what's happening?
Thanks!
if you have single line text add this to your css.
.container > p{
line-height:50px;
}
To use vertical-align: middle, you need to use display: inline-block.
Your code will change to this:
.container{
display: inline-block; /* This is the line you need to introduce */
width: 100%;
height: 50px;
background-color: lightblue;
vertical-align: middle;
}
You can take a look at the demo.
Update
Using display: table for .container and display: table-cell for .container p makes it work.
Updated demo
.container{
display: table;
width: 100%;
height: 200px;
background-color: lightblue;
vertical-align: middle;
}
.container p {
display: table-cell;
vertical-align: middle;
}
Vertical alignment in CSS is not as straightforward as horizontal alignment.
Depending on your case and the content you need to apply one technique or another.
You can check this link for different techniques:
http://www.vanseodesign.com/css/vertical-centering/
In short, vertical-align: center; is not going to work in your case
Add to your container the display property as follows:
.container{
width: 100%;
height: 50px;
background-color: lightblue;
display:inline-block;
vertical-align: middle;
}
When I try to vertical align centered inner DIV my centering isn't working...
What's my problem here?
CSS Code:
#page_bar
{
width: 100%;
height: 30px;
background-color: white
}
.page_bar
{
width: 800px;
height: 30px;
display: table-cell;
vertical-align: middle
}
HTML Code:
<div id="page_bar">
<div class="page_bar">
Mapa Strony
</div>
</div>
EDIT: I want inner DIV to be centered, not the text in inner DIV...
EDIT: Look at: http://mistic-miners.comule.com/index.html the silver area must be centered which means the inner div must be centered not the text inside of inner div.
It looks like you may need to wrap the .page_bar class in order to get it to center horizontally with the table-cell display.
#wrap{
margin: 0px auto;
display:table;
}
#page_bar
{
width: 100%;
height: 30px;
background-color: white
}
.page_bar
{
width: 800px;
height: 30px;
display: table-cell;
text-align: left;
vertical-align: middle;
margin: 0px auto;
}
<div id="page_bar">
<div id="wrap">
<div class="page_bar">
Mapa Strony
</div>
</div>
</div>
This will be centered vertically and horizontally:
#page_bar
{
width: 100%;
height: 100px;
background-color: black;
text-align: center;
}
.page_bar
{
width: 800px;
height: 100px;
display: table-cell;
vertical-align: middle;
color: white;
}
jsfiddle: http://jsfiddle.net/DgwwB/2/
if you add text-align:center; to #page_bar ?
vertical-align: middle
I think you forgot a ';' on this. Also give 2~3px space 30-27 or 33-30
I've had this issue and after wasted time on faffing about I finally found the obvious simple fix.
If you apply 'display:table-cell' to an element, apply 'display:table' to the parent, this will make vertical aligning work the way you expect it to.