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;
Related
I want to position my text exactly in the center of my background image without using and position relative or absolute. Most of the answers online use position absolute for the text and a top. But i don't want to use any positioning method of approach in my case.
Are they any other available approaches to position a child element in the center of a parent element?
.parent-element{
position:relative;
.child-element{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
}
Did you try:
margin: 0 auto;
text-align: center;
vertical-align: middle;
You can use also the inline margin(top,bottom,right or left) to positioning where you want your image. You simply have to put your margin with px(es margin:10px) and you can try this online on the browser(normally just press F12 and you have the screen with all information)
you can use flex for it.
.container {
display: flex;
width: 350px;
height: 350px;
background-image: url('http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png')
}
.item {
background-color: white;
width: 80px;
height: 80px;
margin: auto;
}
<div class="container">
<div class="item">Sample Text</div>
</div>
Using Flexbox solves the issue quite easily
.test{
background-image:url("http://blogueandoalos50.com/wp-content/uploads/2015/01/fondo9.jpg");
height:200px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="test">Hello World</div>
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.
I am trying to make a layout with a div which have some text in the middle, and bellow that text, 4 social media icons. So I have made a div with another div inside of it, but I can't center the last one vertically...
So, how do I center div "sec10_content" in the middle of div "section10"?
I know that this question has been asked before, but I can't manage the code in my case...
Here's the code:
HTML:
<div class="section10">
<div class="sec10_content">
</div>
</div>
CSS:
.section10
{
width:100%;
height:320px;
vertical-align: middle;
background-color:#222222;
}
.sec10_content
{
width: 50%;
height: 100px;
margin: auto;
border: 1px solid white;
}
I think that adding display inline-flex would work.
.section10
{
width:100%;
height:320px;
vertical-align: middle;
background-color:#222222;
display: inline-flex;
}
The way I like is to add these 3 lines of css on inner div
position: relative;
top: 50%;
transform: translateY(-50%);
See JSFiddle.
Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 8 years ago.
Here is what I have right now. In other divs using vertical-align:middleand setting the line-height to the same value as the height property it should work!The only thing is that in those divs I used pixel dimension and not percentages. Can anybody tell me why this wont work with percentages? also setting the text-sizeto 50% should also make text half the size of the div but it is really really small still? What is going on here?
#chooseStateAlabama {
width: 20%;
height: 25%;
top: 0;
left: 0;
position: absolute;
background: url(../_images/_unitedStates/_states/chooseStateAlabama.png);
background-size: 100% 200%;
float: left;
color: #FFFFFF;
font-family: Arial;
font-style: normal;
font-weight: bold;
font-size: 50%;
line-height: 25%;
text-align: center;
vertical-align: middle;
}
You can use display:inline-block , height:100% and vertical-align:middle to a single element or pseudo element aside the text (before or after): DEMO
#chooseStateAlabama:before {/* this can be an extra tag within HTML structure if pseudo used for other purpose */
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
If you happen to have more content or more than 1 line, then use an element to wrap it as well and apply to it display and vertical-align. DEMO2 to see behavior
If you can alter the markup you can use quite a few ways to get the result you want.
http://jsfiddle.net/vvpn6cge/
Because you have text ( that could be one or many lines long I guess) then you could get the result using CSS table cells (see the fiddle).
.outer-container {
display: table;
width: 100%;
}
.txt-vertical-align {
display: table-cell;
text-align: center;
vertical-align: middle;
}
As a further alternative, you might use flexbox
display: flex;
justify-content:center;
align-content:center;
flex-direction:column;
(stolen from this stackoverflow question)
http://jsfiddle.net/L85h8vvj/7/
HTML
<body>
<div class='container4'>
<div>Example :)</div>
</div>
</body>
CSS
body{
margin:0px;
}
div.container4 {
height: 100%;
width:100%;
position: absolute;
}
div.container4 div {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: 50-%;
transform: translate(-50%, -50%)
}
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.