I am trying to top-align two child divs in a containing div. The child divs contain different content and may be of varying heights. Is there a way I can make the two child divs top-align?
Here's a fiddle to illustrate the problem - http://jsfiddle.net/billafy/Rhj36/3/
HTML
<div class="headerStuff">
Header
</div>
<div class="sectionArea">
<div class="leftPanel">
<div><img src="http://placekitten.com/50/50" alt="some image1" /></div>
<div><button>test</button></div>
</div>
<div class="rightPanel">
<div><img src="http://placekitten.com/50/50" alt="some image2" /></div>
<div>
<span>Some other text</span>
<div>
<span>And some additional content</span>
</div>
</div>
</div>
</div>
<div class="footerStuff">
Footer
</div>
CSS
.headerStuff {
font-size: 20pt;
background-color: purple;
border: 1px solid lime;
}
.sectionArea {
width: 100%;
display: inline-block;
height: 370px;
text-align: center;
vertical-align: middle;
border: 1px solid lime;
}
.leftPanel {
display:inherit;
border: 1px solid orange;
}
.rightPanel {
display:inherit;
border: 1px solid blue;
}
.footerStuff {
font-size: 20pt;
background-color: red;
border: 1px solid lime;
}
Use vertical-align: top; to both panels.
CSS:
.leftPanel {
display:inherit;
border: 1px solid orange;
vertical-align: top;
}
.rightPanel {
display:inherit;
border: 1px solid blue;
vertical-align: top;
}
You could use vertical-align:text-top; in your right and left panels.
Related
UI told me to make a list, the list item height is not fixed, it depends on the images uploaded by user, and the user may upload a 10x1000 image or 1000x10 image, whatsoever, the image width is fixed to 100px, but height is auto. At right side of the image, there are some text written by user, which is not a one line text, it is multiline text which we don't know how many lines there will be.
html like below:
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
css as below:
.container {
border: 1px solid green;
padding: 1px;
position:relative;
}
.container img {
width: 300px;
vertical-align: middle;
}
.aaa {
display: inline-block;
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
}
.bbb {
border: 1px solid blue;
}
But the result is as below:
How can I make the text box vertical align middle to the image at left side?
All code is at Codepen, you can try it there.
Thank you!
Declare vertical-align: middle on the sibling element (.aaa) as well.
To display x2 sibling inline block-level elements vertically center to each other, both elements should have the property vertical-align: middle.
Code Snippet Demonstration:
.container {
border: 1px solid green;
padding: 1px;
position:relative;
}
.container img {
width: 300px;
vertical-align: middle;
}
.aaa {
display: inline-block;
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
vertical-align: middle; /* additional */
}
.bbb {
border: 1px solid blue;
}
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
You can use the power of flex.
Use align-items: center to do the trick.
Check it out: https://codepen.io/anon/pen/dJmrvB
Solution1: Just apply vertical-align: middle; to .aaa class
.container {
border: 1px solid green;
padding: 1px;
position: relative;
}
.container img {
width: 300px;
vertical-align: middle;
}
.aaa {
display: inline-block;
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
vertical-align: middle;
}
.bbb {
border: 1px solid blue;
}
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
Solution2: Try to make use of flex CSS
.container {
border: 1px solid green;
padding: 1px;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.container img {
width: 300px;
}
.aaa {
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
}
.bbb {
border: 1px solid blue;
}
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
Is there some useful techniques?
Here is the fiddle
For text centering I tried to use this:
.wrapper div {
position: relative;
top: -8px;
}
To remove bottom canvas margin I tried to use this:
.wrapper canvas {
margin-bottom: -5px;
}
But I always try to avoid negative parameters.
Did you mean vertically align? Like this?
.wrapper {
border: 1px solid green;
display: inline-block;
}
.wrapper div {
border: 1px solid blue;
display: inline;
margin-left: 10px;
}
.wrapper canvas {
border: 1px solid red;
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<canvas width="32" height="32"></canvas>
<div class="question">1234567890</div>
</div>
is this what you mean?
canvas {
float: left;
}
You can use this code for horizontally design
<style>
.wrapper {
border: 1px solid green;
float:left;
}
.demo_class{
display: inline-block;
float: left;
}
.demo_class .question{
height: 32px;
line-height: 32px;
}
<div class="wrapper">
<div class="demo_class">
<canvas id="null" width="32" height="32" style="border:1px solid red;"></canvas>
</div>
<div class="demo_class">
<div class="question">1234567890</div>
</div>
I've seen an article about vertical centering of text and image. I've seen an article about vertical centering text inside a floated div.
But not both conditions.
Here's my experiment:
.phase {
width: 500px;
height: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.circle {
float: left;
height: 50px;
width: 50px;
vertical-align: middle;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
float: left;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="circle">
</div>
<div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;vertical-align:middle" />
</div>
</div>
</div>
<h1>I love css</h1>
</div>
Notice the image is vertically centered, but the green circle is not vertically centered.
How can I get both the image and the green circle vertically centered?
You can achieve a totally centered element using calc and view-units:
#example {
width: 100px;
height: 100px;
border: 1px solid green;
border-radius: 50px;
position: fixed;
top: calc(50vh - 50px);
left: calc(50vw - 50px);
}
<div id="example"></div>
This example will keep it right in the centre even with scrolling, etc - but you could place it centre based on the initial view using an absolute position.
My fixed code. It works in IE and in Chrome.
top: calc(0.5vh + 50px); is what does the trick. 50px of course would be the height of the element you want to vertically center.
.phase {
width: 500px;
height: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.circle {
position: relative;
float: left;
top: calc(0.5vh + 50px);
height: 50px;
width: 50px;
vertical-align: middle;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
float: left;
border: 1px solid black;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="circle">
</div>
<div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;" />
</div>
</div>
</div>
<h1>I love css</h1>
</div>
You need to place the circle in a container and set the container's line-height property. Try this:
.phase {
width: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.container {
float: left;
height: 300px;
line-height: 300px;
}
.circle {
display: inline-block;
height: 50px;
width: 50px;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
display: inline-block;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="container"><div class="circle">
</div></div>
<div class="container"><div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;vertical-align:middle" />
</div></div>
</div>
</div>
</div>
I would like the content in the second column to have 10px of space above it. But when I add "padding-top: 10px;" the content of both columns comes down 10px. Can anyone suggest a solution?
CSS:
#div1 { display: table;}
#div1-1 { display: table-cell;
width: 200px;
border: 1px solid #aaa;
}
#div1-2 { display: table-cell;
width: 200px;
border: 1px solid #aaa;
padding-top: 10px;
}
HTML:
<div id="div1">
<div id="div1-1">Apples</div>
<div id="div1-2">Oranges</div>
</div>
If you add float:left; to #div1-1, the first column will remain as it is.
My solution is to try to add a box in each cell
#myDiv {
display: table;
}
#div1 { display: table-row;}
#div1-1{
display: table-cell;
width: 200px;
border: 1px solid #aaa;
}
#div1-2 {
display: table-cell;
width: 200px;
border: 1px solid #aaa;
}
.space{
height:10px;
width:100%;
display:block;
}
.content{
width:100%;
}
<div id="myDiv">
<div id="div1">
<div id="div1-1">
<div class="content">Apples</div>
<div class="space"> </div>
</div>
<div id="div1-2">
<div class="space"> </div>
<div class="content">Oranges</div>
</div>
</div>
</div>
I have the following html code:
<div class="a">
<div class="b">
text
</div>
<div class="c">
text
</div>
</div>
div.a
{
margin-top: 10px;
clear: left;
float: left;
width: 100%;
text-align: center;
}
div.b
{
padding: 27px 10px 7px 10px;
background-color: #fff;
overflow: hidden;
float: left;
}
div.c
{
float: left;
}
What styles should I set for div.c to make it be beside the div.b and fit the remaining width?
It's for a tempalte that will fit 100% of the screen.
thanks!
<div class="a">
<div class="b">
click here to be amazed!
</div>
<div class="c">
this is some awesome text
</div>
</div>
<STYLE>
.b,.c {
padding:15px;
}
div.a {
border: 1px solid red;
}
div.b {
float: left;
border: 1px solid blue;
}
div.c {
border: 1px solid green;
}
</STYLE>