How can I center text 'One' vertically with respect to the parent box '#container' using only CSS 2.1 in the following code without using table ? Text '2.1' and text '2.2' also need to be centered vertically in the green boxes.
<div id="container">
<div id="col-1">
One
</div>
<div id="col-2">
<span>2.1</span>
<span>2.2</span>
</div>
</div>
<style>
#container {
position: absolute;
height: 100px;
border: 1px solid crimson;
vertical-align: text-bottom;
}
#col-1, #col-2 {
display: inline-block;
height: 100%;
}
#col-2 span {
display: block;
height: 48px;
line-height: 48px;
border: 1px solid green;
}
</style>
http://jsfiddle.net/wa3r7d6j/
Just change in css:
#col-1, #col-2 {
display: inline-block;
vertical-align:middle;
}
remove : height:100%; from #col-1, #col-2
Check Fiddle here.
Related
I'm trying to put two spans in a div, one on each side, and both aligned to the bottom of the div, without using absolute positioning (since that ignores padding, etc and I always feel bad after resorting to it). The text in the right span is taller than in the left span. If I use vertical-align to position them, it doesn't take affect if they are both floated, however without them both being floated, they will not be horiziontally aligned properly. I don't have any guarantees on which of the two spans will have more text in it.
http://jsfiddle.net/gsvfn07f/
<div class="outer">
<div class="inner">
<span class="left">left</span>
<span class="right">right</span>
<div class="clearfix"></div>
</div>
</div>
.outer {
width: 40%;
height: 200px;
border: 1px solid red;
}
.inner {
border: 1px solid green;
padding: 5px;
}
.left {
float: left;
display: inline-block;
vertical-align: baseline;
}
.right {
float: right;
font-size: 2em;
}
.clearfix {
clear: both;
}
You can use line-height to get margin from top for your text.
This code seems to do what you want:
.outer {
width: 40%;
height: 200px;
border: 1px solid red;
}
.inner {
height: 35px;
width: 100%;
border: 1px solid green;
}
.left {
line-height: 48px;
float: left;
width: 50%;
}
.right {
display: block;
float: right;
width: 50%;
text-align: right;
font-size: 2em;
}
<div class="outer">
<div class="inner">
<span class="left">left</span>
<span class="right">right</span>
</div>
</div>
Here is the code.
I have typical form with label, input and helper:
The code:
html:
<div class="container">
<span class="label">Label:</span>
<div class="el">
<input>
<span>helper helper helper</span>
</div>
</div>
css:
.container {
outline: 1px solid black;
width: 200px;
height: 100px;
}
.label{
display: inline-block;
width: 30%;
}
.el{
display: inline-block;
width: 60%;
}
input{
width: 50%;
}
The problem is that Label: aligned opposite second row. I know how to fix that: i can use float: left; or vertical-align: top; in the .label class, but i want to know, why is that happening? Why Label: jump to second row?
p.s. Sorry for my english.
This is because the default value for vertical-align is baseline, which...
Aligns the baseline of the element with the baseline of its parent
For reference, here is the article on Mozilla Developer Network
Please try this one;
.inner {
display: inline-block;
vertical-align: middle;
background: yellow;
padding: 3px 5px;
}
DEMO
I think due to the display:inline-block defined is creating this situation..
Better use display:inline
This will solve your problem...
And here is the code
CSS
.container {
outline: 1px solid black;
width: 250px;
height: 100px;
}
.label{
display: inline;
width: 50%;
}
.el{
display: inline;
width: 60%;
}
input{
width: 50%;
}
HTML
<div class="container">
<span class="label">Label:</span>
<div class="el">
<input />
<span>helper helper helper</span>
</div>
</div>
Here is a fiddle of the below:
.filterDivActual, #filterSeparator {
display: inline-block;
}
.filterDivActual {
border: 2px solid grey;
width: 15%;
height: 50px;
line-height: 50px;
color: grey;
position: relative;
}
#filterSeparator {
height: 50px;
width: 5px;
background-color: black;
}
<div id='filterDiv'>
<div class='filterDivActual'>Top</div>
<div class='filterDivActual'>New</div>
<div id='filterSeparator'></div>
<div class='filterDivActual'>Today</div>
<div class='filterDivActual'>Yesterday</div>
<div class='filterDivActual'>None</div>
</div>
What I want is for the #filterSeparator to be aligned with the other divs.
For some reason, all the other divs are below the #filterSeparator.
If I put text inside #filterSeparator, then it works.
Is there a way for me to get it to work without placing any text inside #filterSeparator?
fiddle
For inline / inline-block elements, use the vertical-align property:
.filterDivActual, #filterSeperator {
display: inline-block;
vertical-align: middle ; /* or some other value: */
}
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
I don't know why it does this but you can fix it by using float:left; instead of display:inline-block
Putting content in the empty <div> will fix it.
<div id='filterSeperator'> </div>
#filterSeparator:before {
content: ".";
visibility: hidden;
}
.filterDivActual, #filterSeparator {
display: inline-block;
}
.filterDivActual {
border: 2px solid grey;
width: 15%;
height: 50px;
color: grey;
position: relative;
}
#filterSeparator {
height: 50px;
width: 5px;
background-color: black;
}
#filterSeparator:before {
content: ".";
visibility: hidden;
}
<div id='filterDiv'>
<div class='filterDivActual'>Top</div>
<div class='filterDivActual'>New</div>
<div id='filterSeparator'></div>
<div class='filterDivActual'>Today</div>
<div class='filterDivActual'>Yesterday</div>
<div class='filterDivActual'>None</div>
</div>
I'm having trouble center text vertically in a DIV using CSS. I've followed the related answers here on SO and elsewhere, but can't seem to get it to work. My simplified scenario is
<div class="outer">
<div class="header-title">
<span class="header-text">This is the title</span>
</div>
</div>
and
div.outer {
position: relative;
height: 200px;
border-style: solid;
border-width:1px;
}
div.header-title {
position: absolute;
font-size: 36px;
height: 100%; /* required */
color: green;
border-style: dashed;
border-width:1px;
}
span.header-text {
vertical-align: middle;
border-style: dotted;
border-width:1px;
}
but the result (in Safari) leaves the 'header-text' span at the top of the 'header-title' div:
your example shows a good workaround for vertically centering elements in a div:
display: table-cell;
vertical-align: middle;
so add it to your div css:
div.header-title {
position: absolute;
font-size: 36px;
height: 100%; /* required */
color: green;
display: table-cell;
vertical-align: middle;
border-style: dashed;
border-width:1px;
}
I have a div element in my page, and an arrow, that I am trying to get to the right middle of the div. Here's the code:
HTML:
<div id="popup">
<p>
This is the inside of a div element.
</p>
</div>
<div id="image"></div>
CSS:
#popup {
background-color: whiteSmoke;
width:500px;
margin:0px auto;
margin-top:100px;
}
#image {
background-image:url('/images/jquerys penis.png');
border:1px solid black;
width:30px;
height:30px;
float:right;
}
Website that I'm working on: site.brycemckenney.com/jquery.html
I had to modify your markup a little: http://jsfiddle.net/Wexcode/y7jTb/
HTML:
<div id="popup">
<p>This is the inside of a div element.</p>
<div id="image"></div>
</div>
CSS:
#popup {
width: 500px;
white-space: nowrap;
margin: 0 auto; }
#popup * { white-space: normal; }
#popup p {
background-color: whiteSmoke;
vertical-align: middle;
display: inline-block; }
#image {
background: url('http://site.brycemckenney.com/images/jquerys%20penis.png') 0 0 no-repeat;
border: 1px solid black;
width: 30px;
height: 30px;
vertical-align: middle;
display: inline-block; }
This solution depends on display: inline-block;, white-space: nowrap, and vertical-align: middle;. If you need help understanding any of what I've just posted, please feel free to ask.
On #image style add:
width: 30px;
margin: auto;