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>
Related
I have to get my content div vertical centered in my header div, and i also dont need space around the content div because i did have it working but it would take up width 100% everytime. Here is my code
#header {
position: absolute;
width: 100%;
height: 15%;
background-color: white;
z-index: 10;
overflow: hidden;
display: table;
}
#content {
display: table-cell;
overflow: auto;
vertical-align: middle;
padding: 0px;
margin: 0px;
float: left;
}
h1 {
display: inline-block;
margin: 0px;
}
<div id="header">
<div id="content">
<h1>Jari Rengeling</h1>
</div>
</div>
Not really sure if this is what you are trying to achieve:
https://jsfiddle.net/pf8oujj6/
Use
display: inline-block;
use display:flex with align-items:center on #header .
is this what you are looking for ?
#header
{
position: absolute;
width: 100%;
height: 30%;
background-color: green;
z-index: 10;
overflow: hidden;
display: flex;
align-items:center;
}
#content
{
overflow: auto;
vertical-align: middle;
padding: 0px;
margin: 0px;
float: left;
}
h1
{
display: inline-block;
margin: 0px;
}
<div id="header">
<div id="content">
<h1>Jari Rengeling</h1>
</div>
</div><!-- #header -->
Remove float left in the content.
https://jsfiddle.net/4tc95oy0/
#content
{
display: table-cell;
overflow: auto;
vertical-align: middle;
padding: 0px;
margin: 0px;
}
Float transform youre element in display block override the previous declaration of display table-cell.
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 want to create an animated graph of skills.
You can check out an example here : http://jsfiddle.net/aoxyLtLe/9/
The above example is using 3 skills but actually I will be using 11 skills
In order to spread them (#skills>div:nth-child(1) div & #skills>div:nth-child(2) span) out evenly I'm using floats. Positioning each of these elements absolutely and then trying to spread them out evenly would obviously take ages.
I want the height of #skills>div:nth-child(1) div to animate bottom to top.
This is currently not the case as I'm using floats and they can't be placed relative to the bottom in order to achieve a bottom-to-top animation.
CSS :
#skills {
position: absolute;
width: 410px;
height: 455px;
top: 0px;
left: 10px;
}
#skills>div:nth-child(1) {
float: left;
height: 400px;
display: table;
width: auto;
table-layout: fixed;
margin-left: 31px;
margin-top: 44px;
}
#skills>div:nth-child(1) div {
position: relative;
width: 77px;
height: 0;
background-color: #0597BE;
display: table-cell;
text-align: center;
float: left;
margin: 0px 12px;
}
#skills>div:nth-child(2) {
float: left;
display: table;
width: 303px;
table-layout: fixed;
margin-left: 31px;
}
#skills>div:nth-child(2) span {
font-family: myriad pro;
font-size: 15px;
color: #0597BE;
display: table-cell;
text-align: center;
}
HTML :
<div id="skills">
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<span>HTML</span>
<span>CSS</span>
<span>Javascript</span>
</div>
</div>
JS :
$('#skills>div:nth-child(1) div').eq(0).animate({
height: 360
});
$('#skills>div:nth-child(1) div').eq(1).animate({
height: 120
});
$('#skills>div:nth-child(1) div').eq(2).animate({
height: 200
});
Can you think of a solution to my problem that achieves a bottom-to-top animation while at the same time spreads out all the relevant elements evenly on the x-axis?
I think you want something like this
Js Fiddle
made some changes to your css
#skills {
position: absolute;
width: 410px;
height: 455px;
top: 0px;
left: 10px;
}
#skills>div:nth-child(1) {
float: left;
height: 400px;
display: table;
width: auto;
table-layout: fixed;
margin-left: 31px;
margin-top: 44px;
width:100%;
}
#skills>div:nth-child(1) div {
position: absolute;
width: 77px;
height: 0;
background-color: #0597BE;
display: table-cell;
text-align: center;
float: left;
margin: 0px 12px;
bottom:50px;
}
#skills>div:nth-child(1) div:nth-child(1){
left:40px;
}
#skills>div:nth-child(1) div:nth-child(2){
left:138px;
}
#skills>div:nth-child(1) div:nth-child(3){
left:239px;
}
#skills>div:nth-child(2) {
float: left;
display: table;
width: 303px;
table-layout: fixed;
margin-left: 31px;
}
#skills>div:nth-child(2) span {
font-family: myriad pro;
font-size: 15px;
color: #0597BE;
display: table-cell;
text-align: center;
}
Edit
check the updated fiddle
JS Fiddle
rotating the div will fix it and made change to
#skills>div:nth-child(1) div{
float:right /** from float left **/
}
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).
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