So basically I need to center (vertically) text, but the height is variable, since it can be on multiple lines, how can I do this?
What I've tried:
.box {
text-align: center;
vertical-align: center;
}
.box {
position: absolute;
top: 50%;
text-align: center;
left: 50%;
}
.box {
margin: 50% auto;
text-align: center;
}
I don't know if this is even possible or if I have to correct it with JS.
Use display:table-cell
.box {
text-align: center;
vertical-align: middle;
background:black;
color:white;
height:200px;
display:table-cell;
width:450px
}
DEMO - Single line
DEMO - Multi line
Here you go, works vertically and horizontally.
HTML:
<div class="area">
<div class="bubble">
<p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p>
</div>
</div>
CSS:
.area {
width: 300px;
height: 300px;
background: url(../images/abe-bg.png) no-repeat;
position: relative;
}
.bubble {
position: absolute;
left: 93px;
top: 21px;
width: 135px;
height: 84px;
display: table;
}
.bubble p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
DEMO
Related
I am trying to overlay two pieces of text, directly on top of one another to create a layered effect, whilst also trying to vertically centre them in the parent. To vertically centre, I am using a ghost pseudo element as outlined in this post, which I find to be the most reliable method when centring in a parent whose height is variable.
As you can see in the fiddle below, the .bg-text element is vertically centered, but the .text-wrapper element is forced to sit below the parent, so it appears this method of vertically centring does not allow for more than one centered element?
figure {
position: relative;
overflow: hidden;
float: left;
width: 100%;
height: 200px;
background: red;
}
figure::before {
content: "[BEFORE]";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
/* Background text */
.bg-text {
display: inline-block;
vertical-align: middle;
width: 80%;
color: green;
text-align: center;
}
/* Text */
.text-wrapper {
display: inline-block;
vertical-align: middle;
width: 80%;
text-align: center;
color: blue;
}
<figure>
<div class="bg-text">BACKGROUND TEXT</div>
<div class="text-wrapper">
<h3>Overlay This</h3>
<h4>And this!</h4>
</div>
</figure>
FIDDLE
Flexbox and absolute positioning can do that:
* {
margin: 0;
padding: 0;
}
figure {
position: relative;
height: 200px;
background: red;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
/* Background text */
.bg-text {
width: 80%;
color: green;
text-align: center;
}
/* Text */
.text-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 255, 0, 0.25);
width: 80%;
text-align: center;
color: blue;
}
<figure>
<div class="bg-text">BACKGROUND</div>
<div class="text-wrapper">
<h3>Overlay This</h3>
<h4>And this!</h4>
</div>
</figure>
Vertical-align:middle works in table-celll as you not puts. Use this in your style may it's help you
.bg-text {
color: green;
display: table-cell;
text-align: center;
vertical-align: middle;
width: 80%;
}
.text-wrapper {
color: blue;
display: table-cell;
text-align: center;
vertical-align: middle;
width: 80%;
}
figure {
background: red none repeat scroll 0 0;
float: left;
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
Here is my jfiddle - fiddle, everything is perfect here but only the probelm is when you minimise the window the image goes down , need to fit that image in vertically center which is not happening now
HTML:
<div class="left_panel">
<div class="slide-frame">
<img src="http://www.w3schools.com/bootstrap/paris.jpg">
</div>
</div>
CSS:
.left_panel {
border: 1px solid #ddd;
border-collapse: collapse;
bottom: 0;
left: 0;
position: absolute;
right: 300px;
top: 0;
background:#ddd;
}
.left_panel .slide-frame::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.left_panel .slide-frame{
height: 100%;
text-align: center;
width: 100%;
}
.left_panel .slide-frame img {
display: inline-block;
height: auto;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
width: auto;
}
The reason for this behaviour is, that the :after element is an inline element. That causes a little gap between the image and that element. With setting the fon-size to zero, you remove that gap:
.left_panel {
font-size: 0;
}
Good article about that topic on CSS-Tricks. This solution is preferable, because you aren't using text. With text, there are other approaches to remove the space between inline elements.
Please check this for vertical and horizontal div without using height. https://jsfiddle.net/hardyrajput/myuqm5x8/2/
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 50%;
padding: 20px;
color: white;
text-align: center;
}
use this
.left_panel .slide-frame {
height: 100%;
text-align: center;
width: 100%;
display: inline-table;
}
just add display property
I am trying to display Booking in the middle of red screen but it fails, Main container must have to be display:block property however I can make changes to child div and span, I was able to make it work with margin-top set programmatically with position relative but that is causing some serious issues so I can't use margin top here, i prefer to make it work with verticle-align:middle and text-align:center here
HTML
<div class="tabs-bottom">
<div id="tab-1"> <span>Booking</span>
</div>
</div>
CSS
.tabs-bottom { // this can't change
display:block;
width: 100%;
height: 255px;
background:red;
}
#tab-1 {
display: inline-block;
text-align: center;
vertical-align: middle;
}
http://jsfiddle.net/vVnR5/46/
You can use absolute positioning or the below code.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#tab-1 {
display: block;
text-align: center;
vertical-align: middle;
position: relative;
top: 50%;
transform: translateY(-50%); }
Simplest solution is to just change the tabs display to block.
#tab-1 {
display: block;
text-align: center;
vertical-align: middle;
}
CSS
#tab-1 {
display: table;
text-align: center;
height: inherit;
width: 100%;
}
#tab-1 span {
display: table-cell;
height: inherit;
vertical-align: middle;
}
Since you said you can alter the child display Property i have made some adjustments in child div's CSS
DEMO
vertical-align: middle; will only work with the line-height property set on the parent. So just change height to line-height.
.tabs-bottom {
display:block;
width: 100%;
line-height: 255px;
background:red;
text-align: center;
}
#tab-1 {
display: inline-block;
vertical-align: middle;
}
You need 2 changes in #tab-1 css:
1.) Use line-height to make vertical middle.
2.) change display: inline-block; to display: block; for horizontal middle.
like following:
#tab-1 {
display: block;
line-height: 255px;
text-align: center;
}
Check Your updated Fiddle Here
I Hope this will help you
try it out
.tabs-bottom {
display:block;
width: 100%;
height: 255px;
background:red;
text-align: center;
position: relative;
}
#tab-1 {
display: inline-block;
text-align: center;
vertical-align: middle;
position: absolute;
top: 50%;
margin-top: -8.5px
}
maybe just remove display: inline-block;
.tabs-bottom {
display:block;
width: 100%;
height: 255px;
background:red;
}
#tab-1 {
text-align: center;
vertical-align: middle;
}
http://jsfiddle.net/Igor_Ivancha/kmu3bov4/
Try using CSS positioning Demo
.tabs-bottom {
display:block;
width: 100%;
height: 255px;
background:red;
position: relative;
}
#tab-1 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 40px;
height: 40px;
}
.main-div{ height:300px; background:red }
.verticle-middle{
position:relative;
top:50%;
transform:perspective(1px) translateY(-50%);
text-align:center;
}
<div class="main-div">
<div class="verticle-middle">
Verticle middle text
</div>
</div>
I have a problem. I want to achieve something like this:
I have a div with fixed height, and 2 other divs inside, with variable / unknown height, which I want to have
a) vertically centered
b) floating left /right
Right now I am trying something like this.
<div class="wrapper">
<div class="left">This is left</div>
<div class="right">This should be right</div>
</div>
.wrapper:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.left {
display: inline-block;
vertical-align: middle;
}
.right {
display: inline-block;
vertical-align: middle;
}
Everything is perfectly centered, but the right div is next to the left one, and not on the right side. As soon as I start to put in
float: right;
into my right class, it is on the right side, but not centered anymore. And I have no clue how to achieve this.
Thank you in advance!
There is a really cleaver answer to this at http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ It suggests this code:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
There are other solutions to this problem also, but this is the most simple. You can then just float each box left or right.
EDIT: another link with a lot of ways of doing this http://css-tricks.com/centering-css-complete-guide/
Try using Flexbox, e.g.
.wrapper {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
}
.left {
display: inline-block;
vertical-align: middle;
background: red;
}
.right {
vertical-align: middle;
background: green;
}
http://jsfiddle.net/hafpuvtq/
More info: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You have to set the html, body elements of height: 100% and margin and padding of 0 outside the container class first before declaring any of the following classes:
HTML
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
position: relative;
top: 50%;
height: 100px;
}
.box1 {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.box2 {
height: 100px;
width: 100px;
background-color: green;
float: right;
}
The left and right both have to contain floats; left box for float: left; and right box for float: right;
That's right - floating an element removes it from the document flow, so it can't align itself to its parent element's line-height. Instead, put a wrapper div around each of the two child elements, and float the wrappers, left and right respectively. Make sure their height is 100%, and then vertically align the children inside them, as you currently are.
See http://jsfiddle.net/conLs2fd/6/.
this answer is just css
.wrapper {
position: relative;
height: 200px;
border: 1px solid gray;
}
.left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
margin: auto;
background-color: lightgray;
display:inline-block;
}
.right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
margin: auto;
background-color: gray;
display:inline-block;
}
<div class="wrapper">
<div class="left child">This is left</div>
<div class="right child">This should be right</div>
</div>
Here is one way of doing it that involves using text-align: justify on the .wrapper parent block. If you can specify the height of .wrapper, you
can set line-height to the same value of the height.
Add a :after pseudo-element of height: 0 to force a second line for the line box containing the elements, which will allow the justification to work.
.wrapper {
border: 1px dotted gray;
height: 100px; /* for demo only */
line-height: 100px;
text-align: justify;
}
.wrapper:after {
content: '';
display: inline-block;
height: 0;
width: 100%;
}
.left, .right {
border: 1px dotted blue;
line-height: 1.2;
}
.left {
display: inline-block;
vertical-align: middle;
}
.right {
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<div class="left">This is left</div>
<div class="right">This should be right</div>
</div>
Here is my problem:
I have a <h1> inside <div> but when I set a border-radius in <div> the <h1> is out from the div, here is my code:
<div class="test"><h1 class="text">test</h1></div>
.test{
background: red;
height: 300px;
width: 300px;
border-radius: 150px;
display: inline-block;
position: relative;
}
.test .text{
display: inline-block;
background: green;
margin: auto;
position: relative;
}
and this is live run
http://jsfiddle.net/n3aru/
Your text is actually not outside your div:
The visuality has just changed, not the structure.
You may want to position your text to the center:
.test{
background: red;
height: 300px;
width: 300px;
border-radius: 150px;
display: inline-block;
position: relative;
text-align: center;
}
.test .text{
display: inline-block;
background: green;
margin: auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
jsFiddle
Centering trick: http://css-tricks.com/centering-percentage-widthheight-elements/
.test{
overflow: hidden;
}
Set the margin of the inner div. Something like this:
margin-top:50px;
margin-left:50px;
A much more concise way to center that text (if that's what you're after):
.test .text
{
margin: 0; /* Only need this because h1 elements have default margin. */
text-align: center;
line-height: 300px;
}
jsFiddle (taken from #nkmol as a base).