i have the following set up
HTML
<div id="wrap">
<div id="box1" class="list"></div>
<div id="box2" class="list"></div>
<div id="box3" class="list"></div>
<div id="box4" class="list"></div>
<div id="box5" class="list"></div>
<div id="box6" class="list"></div>
<div id="box5" class="list"></div>
<div id="box3" class="list"></div>
<div id="box1" class="list"></div>
<div id="box4" class="list"></div>
<div id="box6" class="list"></div>
<div id="box2" class="list"></div>
</div>
CSS
#wrap{margin: 0 auto; text-align: center; vertical-align: middle; border: 1px solid #000000;}
.list{display: inline-block;margin: 0px 10px;}
#box1{border: 1px solid #000000; background-color:#FF0000; width: 121px; height:36px;}
#box2{border: 1px solid #000000; background-color:#00FF00; width: 125px; height:39px;}
#box3{border: 1px solid #000000; background-color:#0000FF; width: 185px; height:52px;}
#box4{border: 1px solid #000000; background-color:#FFFF00; width: 183px; height:26px;}
#box5{border: 1px solid #000000; background-color:#FF00FF; width: 105px; height:44px;}
#box6{border: 1px solid #000000; background-color:#00FFFF; width: 170px; height:34px;}
fiddle
each <div class="list"> actually would hold a single image but for the purpose of this i set the widths and heights to be that of the divs high if the images were there. and yes i am away of the duplicate ids but in reality these divs wont have ids, just the class.
anyway i am trying to get these divs to vertically align for each line. the vertical align needs to be dynamic to the point that if the tallest box (ie. #box3) is removed from a line (because of the re-sizing window moved it to a different line or it was removed all together from HTML) the line should adjust accordingly (ge. if #box3 and #box5 were on the same line where other lines almost touch #box3 border, when all #box3 is removed the other lines should now almost touch #box5 border)
As you can see i am already using vertical align with no avail. so what other CSS do i need?
Just set vertical-align to the elements themselves instead of the wrapper.
CSS
#wrap{margin: 0 auto; text-align: center; border: 1px solid #000000; }
.list{display: inline-block;margin: 0px 10px; vertical-align: middle;}
See DEMO
You could use flexbox to achieve the desired result if you are okay with current browser support for flexbox.
Using flexbox provides the ability to evently distribute your images horizontally in each row and align them at their vertical centers.
/* Flex container */
.container{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
/* Each div inside container */
.container div{
align-self: center;
margin:20px;
}
#box1{border: 1px solid #000000; background-color:#FF0000; width: 121px; height:36px;}
#box2{border: 1px solid #000000; background-color:#00FF00; width: 125px; height:39px;}
#box3{border: 1px solid #000000; background-color:#0000FF; width: 185px; height:52px;}
#box4{border: 1px solid #000000; background-color:#FFFF00; width: 183px; height:26px;}
#box5{border: 1px solid #000000; background-color:#FF00FF; width: 105px; height:44px;}
#box6{border: 1px solid #000000; background-color:#00FFFF; width: 170px; height:34px;}
<div class="container">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box5"></div>
<div id="box3"></div>
<div id="box1"></div>
<div id="box4"></div>
<div id="box6"></div>
<div id="box2"></div>
</div>
#wrap{
margin: 0 auto;
text-align: center;
border: 1px solid #000000;
}
.list{
display: inline-block;
margin: 0px 10px;
vartical-align: middle;
}
please try to vartical-align middle in .list class....
is this work?
Related
Need tabs to shrink while the main container doesn't fit all items by width.
Here is expected behavior:
http://adamschwartz.co/chrome-tabs/
But could it be done on pure css, flexbox may be?
Solution was pretty simple. Just display: flex; for container, and overflow: hidden; for tab items.
Don't know why my question was downvoted. :(
html {
font-family: sans-serif;
}
.container {
display: flex;
border: 1px solid silver;
padding: 10px 10px 0;
width: 400px;
margin: 0 auto 10px;
}
.tab {
overflow: hidden;
text-overflow: ellipsis;
height: 20px;
border: 1px solid silver;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
padding: 10px;
margin-right: 8px;
border-bottom: none;
}
.tab:last-child {
margin-right: 0;
}
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
</div>
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
<div class="tab">Chrome</div>
<div class="tab">Flexbox</div>
</div>
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
<div class="tab">Chrome</div>
<div class="tab">Flexbox</div>
<div class="tab">Stackoverflow</div>
</div>
I have some questions about this code.
The first inputtxt class element is a simple inline-block display. Last two inputtxt class elements are input text field. Why they show different? Does input text field has default padding? Why the vertical align referring to gray div is different?
All inputtxt class elements have some top and bottom gap distances to previous and following lines. Why?
Thank you so much!
.remind{
float: left;
width: 80px;
height: 40px;
background-color: #cccccc;
border: 1px solid black;
}
.inputtxt{
display: inline-block;
width: 200px;
height: 12px;
border-radius: 5px;
border: 1px solid #999999;
}
<div class="formitm">
<div class="remind"></div>
<div class="inputtxt"></div>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/>
</div>
When the div height is smaller than div line-height the browser fits the next elements based on line-height setting by default, this just happen when element is inline-block. To fix it just add a line-height property to the element parent.
Also you can set .inputtxt padding to 0, removing input default padding.
.remind{
float: left;
width: 80px;
height: 40px;
background-color: #cccccc;
border: 1px solid black;
}
.inputtxt{
display: inline-block;
width: 200px;
height: 12px;
border-radius: 5px;
border: 1px solid #999999;
}
.formitm {
line-height: 10px; /*less or equal than inline-block child*/
}
<div class="formitm">
<div class="remind"></div>
<div class="inputtxt"></div>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/>
</div>
Add the following style to your .inputtxt
padding: 0;
vertical-align: top;
Trying to center a bootstrap row and it's contents inside a div. The code is below:
HTML:
<div class="horizontal-layout">
<div class="row">
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_coversheet_blue.png" style="height:100px; width:100px; cursor:pointer;">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_onepager_pink.png" style="height:100px; width:100px;cursor:pointer ">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_user_profile_green.png" style="height:100px;width:100px;cursor:pointer ">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_create_packet.png" style="height:100px; width:100px;cursor:pointer">
<h4>View</h4>
</div>
</div>
</div>
CSS:
.horizontal-layout {
/*background-color: blue;*/
min-height: 700px;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
padding: 30px;
}
.packet-icon {
text-align: center;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
min-height: 140px;
min-width: 140px;
}
RESULT:
But When I go and make changes to parent div(horizontal-layout) be displayed flex and the child div to align-middle, my width of row changes.
After Css Change:
.horizontal-layout {
/*background-color: blue;*/
min-height: 700px;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
padding: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.horizontal-layout > div {
display: inline-block;
vertical-align: middle;
}
OUTPUT:
Can anyone fix the row with issue?
By default, div was display: block, so that the width was automatically 100%.
Specifying .horizontal-layout > div to display: inline-block changed that behavior, so if you want to keep that, you have to set width manually:
.horizontal-layout > div {
...
width: 100%;
}
I am trying to create simple horizontal stack over words while playing around with CSS and I have noticed that it is impossible to stack two divs horizontally while centering one's content when other div is empty.
Here is the example in question. I tried it in chrome.
http://jsfiddle.net/mncmN/
<div style="margin: 0px; height:50px; width:100%; border-bottom: solid 1px rgba(50,50,50,0.1); background: url(menu-back.png); background-repeat: repeat-x; font-family: helvetica; color: rgba(50,50,50,0.8);">
<div style="text-align:center; display: inline-block; "> <a>Summary</a>
</div>
<div style="text-align:center; display: inline-block; height: 100%; border-right: solid gray 1px;"></div>
</div>
Why is that so?
To summarize, I need three things together.
1) Inline div blocks stacks horizontally
2) Text within them aligned in center(relative to parent container).
3) empty div boxes which will act as border.
Here is an updated JSFIDDLE - Is that what you are looking for exactly?
<div class="container" >
<div class="left">1</div>
<div class="center">2</div>
<div class="right">3</div>
</div>
It is possible.
Here is the WORKING SOLUTION
The Code:
<div style="margin: 0px; height:50px; width:100%; border-bottom: solid 1px rgba(50,50,50,0.1); background: url(menu-back.png); background-repeat: repeat-x; font-family: helvetica; color: rgba(50,50,50,0.8); display:table;">
<div style="text-align:center; display: table-cell; background:#cccccc; vertical-align:middle; "> <a>Summary</a></div>
<div style="text-align:center; display: table-cell; background:gray; vertical-align:middle; height: 100%; border-right: solid gray 1px;">sdfsdfsdfsdf</div>
</div>
Put this in your empty div: . It's a white space. The div will still look empty, but now you can set the width and the height.
Also, try to separate the CSS from the html, like in this jsFiddle: http://jsfiddle.net/WzymM/
Please view the sample [http://jsfiddle.net/mncmN/5/][1] . Hope this was your question? `
<div style="margin: 0px; border: solid red 1px; width:100%; border-bottom: solid 1px black;">
<div style=" border: solid gray 1px; text-align:center; display: inline-block; "> <a>Summary</a>
</div>
<div style="display: inline-block; text-align:center; border: solid gray 1px;">ff </div>
<div style="display: inline-block; text-align:center; border: solid gray 1px;"> </div>
</div>`
[1]: http://jsfiddle.net/mncmN/5/
I've run into a problem.
My code now:
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
<div style="float: left; margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div>
</div>
And it seems like this now:
When the word in the second div is as short as can be placed after the first div, it's in one row, like this:
My goal is to get this design, when the decond div is longer. I'm not allowed to use WIDTH and FLOAT: RIGHT because the inner divs have to de dynamic!
Like this (PhotoShop):
Thanks for the help in advance!
Is this what you looking for
I removed the float:left from the second inner div and increased the margin.
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
<div style=" margin-left: 60px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div></div>
Hope this helps
No width allowed ? OK here is a try:
AFAIK you can't do that with float without having a few width properties. Same with relative positioning of a "column": you still need a width and margin-left on the second column.
A solution is using CSS display: table; and table-cell (nope, not HTML table ;) ). It's as flexible as you want.
http://dabblet.com/gist/1717860 will show you an example (HTML is separated from CSS, an id was added for clarity but isn't really needed and deprecated element u was removed and b replaced by strong. But CSS font-weight: bold; would be better, without context)
#main {
display: table;
width: 500px;
margin: auto;
border: 1px solid blue;
}
#main > div {
display: table-cell;
border: 1px dashed black;
padding: 1em;
}
#main > div + div {
padding-left: 20px;
}
EDIT: compatibility IE8+
display: inline-block; is a good fallback for IE6/7. Well display: inline; zoom: 1; in fact, as IE6/7 doesn't understand the inline-block value but can achieve the same with inline+hasLayout)
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;width:50px;"><b><u>TEST</u></b></div>
<div style="float: left; margin-left: 20px; border: 1px solid black;width:420px;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div>
</div>
This is close to what you wanted. I just set the width for the inner div's. Also, you forgot to close the first div tag.
Float the first box left and give it an fix width. Then give the right div a margin-left bigger than the left div's width! ... and do not float the second div
Try:
<div style="overflow: hidden; width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; margin-right: 20px; border: 1px solid black;">
<b><u>TEST</u></b>
</div>
<div style="overflow: hidden;">
<div style="float: left; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>
</div>
</div>
http://jsfiddle.net/ZmRY2/5/
Is like a table cell, try this
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left;">
<div style="border: 1px solid black;"><b><u>TEST</u></b></div>
</div>
<div style="display:table-cell;">
<div style="margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
</div>
<br style="clear: both;">
</div>