This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Center Text Vertically Within <DIV>
(7 answers)
Closed 8 years ago.
<div style="background: url('theImages/talentQuote.png') no-repeat center; background-size: 100% 100%; min-height: 125px; min-width: 125px; text-align: center; vertical-align: middle;">
<span style="color: #FFF; font-weight: bold;"><xsl:value-of select="txtQuote" /></span>
</div>
Displays this:
How can I modify the CSS, so the quote is always centered within the background image
Try this:
<div class="bubble">
<p>blablabla</p>
</div>
.bubble {
position: absolute;
background: #cccccc;
width: 135px;
height: 84px;
display: table;
}
.bubble p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
here is a fiddle: http://jsfiddle.net/hLwzymmL/
It depends whether you want to center horizontally or vertically:
Horizontally you should give these styles to the object:
For text only:
#parent {
text-align: center;
}
For objects other than text:
#child {
margin-left: auto;
margin-right: auto;
}
or:
#child {
margin-left: 0 auto;
}
Vertically it's a bit more difficult, you have to set display: table to the parent and display: table-cell to the child, so that you can set the style vertical-align: middle to the child.
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
JSFiddle demo
You can simply set your outter container to have display:table; and your inner container to have display:tabe-cell;
div{
display:table;
text-align: center;
}
span{
display:table-cell;
vertical-align: middle;
}
vertical-align: middle; only works on table elements.
demo - http://jsfiddle.net/victor_007/hLwzymmL/1/
.bubble p {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
Do it like this:
HTML markup:
<div class="wrapper">
<span class="middleelement">This is some text..</span>
</div>
CSS:
div.wrapper {
background: #008000;
background-size: 100% 100%;
text-align: center;
display: table;
width: 100%;
height: 285px;
}
.middleelement {
color: #FFF;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}
Se the demo here:
http://jsfiddle.net/e16uhcrz/2/
Related
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I have two divs side by side in inline-block style. When changing overflow on hover from hidden to visible using pure CSS, why do divs change position?
.overlaping {
width: 14.2%;
height: 50px;
font-size: 1rem;
display: inline-block;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background: yellow;
overflow: hidden;
}
.overlaping:hover {
overflow: visible;
}
.wrapper {
height: 200px;
width: 100%;
background: lightblue;
}
<div class="wrapper">
<div class="overlaping">
Some longer text
</div>
<div class="overlaping">
Other div
</div>
</div>
I know inline-block is causing it, but is there some way to mitigate changing position and keeping the display inline-block at the same time?
By default inline-blocks have vertical-align: baseline, which is why it jumps around if another height changes. To fix this, add
.overlaping {
vertical-align: top;
}
Probably you should change the height instead of the overflow setting.
Also add the min-height and float to the boxes.
.overlaping{
width: 14.2%;
min-height: 50px;
height: 50px;
font-size: 1rem;
display: inline-block;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background:yellow;
overflow:hidden;
float: left;
}
.overlaping:hover{
height: auto;
}
.wrapper{
height:200px;
width:100%;
background:lightblue;
}
<body>
<div class="wrapper">
<div class="overlaping">
Some longer text ddg dfg sdfg sdfg sdfgsdfgsdfgsdfg sdfgsdfgsd fgsd fgsd fgsdfgsdfgs dfg sert sertsertsertgs dfgsdfg dfgsdfg
</div>
<div class="overlaping">
Other div
</div>
</div>
</body>
Modify .overlapping style as shown below
.overlaping {
width: 14.2%;
height: 50px;
font-size: 1rem;
float:left;
margin-right:5px;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background: yellow;
overflow: hidden;
}
This question already has answers here:
How can I vertically center text in a dynamically height div?
(10 answers)
Closed 7 years ago.
as said in the title all i need is centering vertically a title h1 in the middle of a div.
this is a very simple code :
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
}
h1{
vertical-align:middle;
}
This is a demo here
After using display table, the text is nicely centered vertically, thank you All. Now i'm facing a new problem; (look at the jsffidle here please
What i want is "text 1" and "text 2" will be displayed side by side, and every small blue div goes under the two red divs in the middle of every red div.. any help please ?
Solution #1
Add display:table; to container and display:table-cell; to h1
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
display:table; /* <---- */
}
h1{
vertical-align:middle;
display:table-cell; /* <--- */
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
display: table;
}
h1 {
vertical-align: middle;
display: table-cell;
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #2 : Flexbox
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
display: flex;
align-items: center; /* align vertical */
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
/* align vertical */
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #3 - Transforms
h1
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
}
h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #4 Add a Pseudo element with 100% height
.container:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* to counter inline-block whitespace */
}
h1 {
display: inline-block;
vertical-align: middle;
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
/* to counter inline-block whitespace */
}
h1 {
display: inline-block;
vertical-align: middle;
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
This is driving me crazy I just don't understand why this piece of simple css to vertically center an element in a div doesn't work as expected.
this is the html:
<div class="header-a-wrapper" style="
line-height: 48px;
height: 48px;
background: red;
display: block;
text-align: center;
">
<a href="/user/5659186348163072" class="right" style="
background: blue;
line-height: normal;
display: inline-block;
vertical-align: middle;
float: none;
height: 20px;
">medical salamander</a>
</div>
the inner element does not get centered vertically but I really think it should
here is an html with the two elements:
http://alephz.com/test.html
and this is the CRAZY part. here is a jsfiddle with the same html and over there it works! tested on the same chrome/win7!
http://jsfiddle.net/pkrsdqkb/
Very weird, but if you want to solve it, you add to 'a':
position: relative;
top: 50%;
transform: translateY(-50%);
Remove
vertical-align: middle;
float: none;
One option to play nicely with vertical-align: middle is to use display: table and display: table-cell.
The wrapper gets display: table and width: 100%
Wrap the links in a div which will act as a "table cell" with display: table-cell
vertical-align: middle will now work as you expect it to.
Compatibility: display: table is good for IE 8 + and modern browsers everywhere.
Example:
.header-a-wrapper {
background: red;
display: table;
text-align: center;
height: 100px;
width: 100%;
}
.vertical {
display: table-cell;
vertical-align: middle;
}
.right {
background: blue;
display: block;
margin: 2px 0;
}
<div class="header-a-wrapper">
<div class="vertical">
medical salamander
medical salamander
</div>
</div>
Old answer
There is a lot of redundant CSS.
The vertical center is applied through: line-height: 48px.
Leave that on the wrapper and remove all the positioning CSS properties on a.right.
Example:
.header-a-wrapper {
line-height: 48px;
background: red;
display: block;
text-align: center;
}
.right {
background: blue;
}
<div class="header-a-wrapper">
medical salamander
</div>
I am trying to align image inside DIV horizontally and vertically. Problem is that I tried several methods and none of them worked for me.
This is code that I am using:
CSS
img{
max-width:100%;
vertical-align: middle;
}
#slika {
float: center;
height: 126px;
width: 111px;
text-align: center;
}
HTML
<div id="slika">
<img src="images/2105602.png" width="auto" height="auto" alt="2105602.png">
</div>
jsfiddle: HERE
Can soemone share his thoughts with me? I can't find solution. It always stays aligned at top.
JSFiddle - DEMO
img {
max-width:100%;
top: 50%;
position: relative;
transform: translateY(-50%);
}
#slika {
height: 126px;
width: 111px;
text-align: center;
border: 1px #000 solid;
}
You can do it by adding a margin of 50% and then a top of -(imageheight/2)
img{
max-width:100%;
vertical-align: middle;
margin-top:50%;
position:relative;
top:-37px;
}
#slika {
float: left;
height: 126px;
width: 111px;
text-align: center;
border:1px solid red;
}
fiddle here: http://jsfiddle.net/dduygx0x/2/
Here is my soluton for your problem using the common table - table-cell way:
I wrapped you image in a new div:
<div id="slika">
<div class="img-wrapper">
<img ....>
</div>
</div>
and altered the CSS:
img{
max-width:100%;
}
.img-wrapper{
display: table-cell;
vertical-align: middle;
}
#slika {
display: table;
float: left;
height: 126px;
width: 111px;
text-align: center;
vertical-align: middle;
}
img{
max-width:100%;
}
.img-wrapper{
display: table-cell;
vertical-align: middle;
}
#slika {
border: 1px solid black;
display: table;
float: left;
height: 126px;
width: 111px;
text-align: center;
vertical-align: middle;
}
<div id="slika">
<div class="img-wrapper">
<img src="http://tommyvirtualnikatalog.com.hr/images/akcija/prehrana/2105602.png" width="auto" height="auto" alt="2105602.png">
</div>
</div>
The benefit of this solution ist that it ist absolut dynamical an can easely made responsive!!
instead of positioning it with hard-coded properties (which would change depending on the image) or using the transform property which wont work in older browsers you can simply wrap the image in a p and set the line-height to match the height of the box
p{
line-height: 126px;
margin: 0;
padding: 0;
}
JSFIDDLE
A solution I've often used is adding an empty span element next to the image, with
#slika span {
display: inline-block;
height: 100%;
vertical-align: middle;
}
The idea is that vertical-align is relative to its siblings, therefore a lone element has nothing to work with. The upside of this method is that its completely dynamic, no fixed pixels, works in older environments ( make sure to test that it meets your lowest-end requirements ) and does not affect the container div. The downside would be the extra html.
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 8 years ago.
i have the code below. I can't get it to align in the center of the division. Pls, may i have some advice? Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 70%;
height:100px;
background-color: yellow;
text-align:center;
}
</style>
</head>
<body>
<div class="center">How to get this text aligned in the center?</div>
</body>
</html>
You need the line-height and vertical-align: middle properties.
height:100px;
line-height: 100px;
vertical-align: middle;
To elaborate what #Leo said, here is the code for multiple lines:
FIDDLE
.centered {
height: 400px;
display: table-cell;
vertical-align: middle;
}
If you need to center the multiline text. then use display: table-cell; check DEMO.
.center {
margin: auto;
width: 70%;
height:100px;
background-color: yellow;
text-align:center;
display: table-cell;
vertical-align:middle;
}
Update:
If you are supporting only latest browser than you can also use CSS3 Flex Property. Check DEMO.
.center {
margin: auto;
width: 70%;
height:100px;
background-color: yellow;
text-align:center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align Vertical */
}
use vertical-align
DEMO here
.center {
margin: auto;
width: 70%;
height:100px;
background-color: yellow;
text-align:center;
vertical-align: middle;
line-height: 100px;
}
if multiple lines are there you should use
display:table-cell
DEMO
If the height is fixed, use the same value for line-height.
height:100px;
line-height: 100px;
vertical-align: middle; is not required.
However, if the height is dynamic, use:
display: table-cell;
vertical-align:middle;