I want my block to be set by line-height (just like i do with text). As i know i should use display: inline-block in this case, but this doesn't work for me. Why?
HTML:
<div class="block">
<div></div>
</div>
<div class="block">
test
</div>
CSS:
.block {
line-height: 50px;
height: 50px;
width: 50px;
border: 1px solid black;
}
.block div {
height: 40px;
width: 28px;
background-color: #f0f;
display: inline-block;
}
Live demo: jsFiddle
hi now add your div aertical-align middle in your css
.block div {
vertical-align: middle;
}
Demo
--------------------------------------------
now if you want to center this box than add text-align center as like this
.block {
text-align: center;
}
Demo
i guess you are trying to center the purple block vertical?
in that case your mixing thing up:
a <div> is a block-level element, where text is not. so if you say line-height, you specify text-alignment of the content for that element, not positioning of a block element, to solve the centering of that purple block, use padding or margin:
.block div {
height: 40px;/* 50 - 40 = 10pixel/2 = 5px space */
width: 28px;
background-color: #f0f;
margin-top: 5px;
}
Demo over here jsFiddle
Related
I searched over Stackoverflow though many posts but I didn't found the solution.
I'm trying to align my text vertically, using margin: auto;
It seems there is a margin collapsing problem, if you wanna check this example:
// HTML
<div class="outer">
<div class="inner">Hello</div>
</div>
<div class="outer2">
<div class="inner">Trying to center this text vertically</div>
</div>
// CSS
.inner {
margin: auto 0;
height: 20px;
color: white;
}
.outer {
background-color: red;
}
.outer2 {
background-color: blue;
height: 200px;
}
If you want to play on my code, click here
I don't believe there's a good way to vertically align content using margin: auto 0 like you've set it up. To get the inner divs vertically centered, here's a simple way by modifying .inner:
.inner {
height: 200px;
color: white;
line-height: 200px;
}
The display does the magic. Display: table-cell on inner and display: table on outer div. And finally on inner div you put vertical-align: middle or whatever position that you want.
.inner {
display: table-cell;
vertical-align: middle;
height: 20px;
color: white;
}
.outer2 {
text-align: center;
background-color: blue;
height: 200px;
display: table;
width: 100%;
}
I would advise you to use flexbox
add this to outer2 class
.outer2 {
background-color: blue;
height: 200px;
display:flex;
align-items:center;
}
And for horizontal align you can use justify-content:center
align-item:center will align items in center of div vertically ,
.outer2 {
display: flex;
justify-content: center, left;
background-color: blue;
height: 200px;
}
you are trying to align the entire inner div by giving margin:auto. You can use text-align: center if you want to align the text. If you need to align the entire div then mention height and width for inner div. I have posted fiddle link please check
http://jsfiddle.net/ajaycoder/n1rz0bts/4/
.inner {
margin: auto ;
color: white;
width:50%;
border: solid 1px red;
height:50%;
}
Will be hard to explain what I want, so I will show an animated gif of the result that I want (made in photoshop) and my code in jsFiddle of what's happening.
As you can see, when the blue box size is not enough to fit all items in one row, the 4ยบ item is moved to the second row (as expected), but instead of being aligned in center, he is left aligned.
My CSS code
.outer-box
{
background: #00cc99;
width: 100%;
max-width: 800px;
font-size: 0;
text-align: center;
padding: 10px;
}
.outer-box a
{
display: inline-block;
width: 120px;
height: 80px;
padding: 10px;
background: #ff5050;
font-size: 12px;
}
.outer-box a:hover
{
background: #990000;
}
.outer-box a div
{
background: #99ccff;
width: 100%;
height: 100%;
}
My HTML
<div class="outer-box">
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
</div>
My Result
My Expected Result
I've tried to play with float divs (one div inside outer-box and the link elements using float left) with no success.
There is a way to accomplish this without javascript?
Here is my code in jsFiddle.
PS. English is not my native language '-'.
with flex or inline block, you can use a pseudo of 1px height and the width of 2 boxes + their margins .
It will be like a fith box, filling entirely the second line and drop as a third line:
.outer-box {
background: #00cc99;
width: 100%;
max-width: 800px;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
font-size: 0;
padding: 10px;
}
.outer-box:after {
content: '';
max-height: 1px;
width: 320px
}
.outer-box a {
display: block;
width: 120px;
height: 80px;
padding: 10px;
background: #ff5050;
font-size: 12px;
margin: 5px 10px;
}
.outer-box a:hover {
background: #990000;
}
.outer-box a div {
background: #99ccff;
height: 100%;
}
<h1> USE full page mode then resize window broser </h1>
<div class="outer-box">
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
</div>
Inline-block version to play with
Firstly, I love the way you presented your problem. Nice images :-)
I don't think you can do what you want without an extra element. Adding an inline-block element that re-adjusts the alignment will do what you want.
.inner-box {
text-align: left;
display: inline-block;
}
See https://jsfiddle.net/qgcz0ax4/
Each of those divs act as text due to the <a> tags. Just set text-align to left for .outer-box - if you want each of the divs to have center aligned text, create a class and give that class to all 4 child divs
.outer-box
{
background: #00cc99;
width: 100%;
max-width: 800px;
font-size: 0;
text-align: left;
padding: 10px;
}
The HTML:
<div class="testing">
<div class="a0"><p>Monday, 07 May 2014 00:00 AM</p></div>
<SPAN class="a1"><SPAN CLASS="b1">abc</SPAN></SPAN>
</div>
<div class="testing">
<div class="a0"><p>Tuesday, 07 October 2014 00:00 AM</p></div>
<SPAN class="a1"><SPAN CLASS="b1">abc</SPAN></SPAN>
</div>
The CSS:
<style type='text/css'>
body {
font: 12px/1.136 arial,verdana,sans-serif;
}
.testing {
width: 245px;
border: 1px solid red;
background-color: grey;
height: 25px;
}
.a0 {
display: inline-block;
width: 70%;
float: left;
background-color: green;
vertical-align:bottom;
}
.a1 {
float: right;
line-height: 25px;
}
.b1 {
display: inline-block;
height: 20px;
vertical-align: bottom;
}
p {
margin: 0;
display: table-cell;
height: 25px;
vertical-align: bottom;
}
</style>
If you see in FF or other browsers, the text in ".a0 p" & ".a1 .b1" is bottom aligned. Though the content in ".a0 p" is long or short, the text is bottom aligned.
Problem is IE7, I'm not able to bottom align both these contents in both cases.
My restrictions are :
1. ".testing" container has to have fixed height because they will sit beside each other and hence should show equal height
2. The content in right hand side will not change whereas content in left hand side might be shorter (just in one line) or longer (might wrap on next line)
Any ideas to fix this alignment issue in IE7 ?
Have you tried changing .a0 (etc.) from display: inline-block; to display: table;?
If this messes up your layout, consider wrapping .a0 in a container with inline-block.
The line-height method does not work for IE7. See prop up solution in http://css-response.com/alignment/
I have a div.one which has a fixed size and a background color. Within it is another div which starts off hidden but is shown with javascript in certain circumstances.
How can I make it so when div.two is shown, you can see its background color and the text doesn't wrap? Basically I want it to behave like it doesn't have a containing div with a fixed size. Is this possible? Thanks
<div class="one">
<div class="two">
Some Text
</div>
</div>
.one {
width: 20px;
height: 20px;
background-color: white;
}
.two {
background-color: grey;
display: none;
}
Demo
.two {
display: inline-block;
background-color: grey;
white-space:nowrap;
}
Fix the dimension of the div as well to 20px and 20px, and set the white-spacing to nowrap.
.two {
width: 20px;
height: 20px;
white-space: nowrap;
...
}
Check out this demo to see if I solved your question.
i have a div that has a specific height and the content inside adjusts according to height VERTICALLY now what i did is i added the property display-table; to the parent div and display: table-cell;vertical-align: middle; to the child div now what happens is my div is vertically aligned and looking good but the h1 inside the child i not exactly as centered aligned as the button i figured adding some padding top or margin top might solve the issue but it is not accepting either of these here's my code
html
<div class="all-smiles" id="parent">
<div id="child">
<div class="container" align="center">
<div class="row">
<h1>All Smiles Welcome</h1>
<button>BOOK AN APPOINTMENT</button>
</div>
</div>
</div>
</div>
css
#parent {
display: table;
width: 100%;
height: 250px;
}
.all-smiles {
background-color: #b7181c;
}
.all-smiles h1 {
color: white;
display: inline;
margin-right: 3%;
}
.all-smiles button {
padding: 12px;
background: 0;
color: white;
border: 1px solid #fff;
text-decoration: none;
font-family: young;
}
#child {
display: table-cell;
vertical-align: middle;
}
FIDDLE
You need to specify these two:
Vertical Alignment as middle
Line height and 1
Code:
.all-smiles h1 {
color: white;
display: inline;
margin-right: 3%;
vertical-align: middle;
line-height: 1;
}
Preview
Fiddle: https://jsfiddle.net/wd3sr2xv/