This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 9 years ago.
I currently have this div:
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
TEST
</div>
I have tried using <div style="text-align:center;"> </div> like this:
<div style='text-align: center;'>
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
TEST
</div>
</div>
^ Doesn't work
I've also tried using <div style="text-align:center; display:block;"> </div> like this:
<div style='text-align: center; display:block;'>
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
TEST
</div>
</div>
^ Doesn't work
I've also tried using <center> </center> (even though it is not recommended...
<center>
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
TEST
</div>
</center>
^ It works!!!
The only problem is that <center> is terrible to use as it is outdated! So how can I do this without using <center>
is this what you want to achieve?
http://jsfiddle.net/cancerian73/LUcUZ/
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px; margin:0 auto;">
TEST
</div>
Related
I'm puzzled as to why on some browsers I get regular grid spacing between squares and others I get different spacing vertically than I do horizontally. I'm using Chrome Version 96.0.4664.93 (Official Build) (x86_64).
I was told a little hack which is border-right: 4px solid white; to the CSS style for div>div. However, I'd like to know why the inconsistency in rendering.
grid_on_Chrome _96, grid_on_Electron
div>div {
display: inline-block;
background-color: rgb(68, 157, 230);
border: 2px solid white;
}
<div>
<div style="width: 50px; height:
50px;">
</div>
<div style="width: 50px; height:
50px;">
</div>
</div>
<div>
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 50px;">
</div>
</div>
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?
I have designed picture 1 in PhotoShop which is what I was planning in the HTML.
I added the float to all elements but for some reason I don't understand it starts breaking the divs (picture 2)... am I missing something obvious here?
[![enter image description here][1]][1]
<div style="width: 974px; margin: 0 auto; background-color: white; padding: 0px;border: 0px solid black;">
<div style="margin: 10px 0px 10px 0px; top: 0px; left: 0px; float: left;border: 1px solid black;">
<a href="/Main/">
<img src="http://s10.postimg.org/7qbv2a6jd/tb_logo_site3.png" width="180" height="86" />
</a>
</div>
<div style="float:right;margin-top:10px;border: 1px solid black;">
<img src="http://s10.postimg.org/h8bm2bs7t/patreon_site3.png" width="280" height="42" />
</div>
<div style="clear:both;"></div>
<div style="margin-top:35px;margin-left:60px;float: left;border: 1px solid black;">
<img src="http://s10.postimg.org/q9uqtofix/poster_1_site3.png" width="300" height="496" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/h9ljvqu1l/paper_soho_title_site3.png" width="400" height="114" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/mfwp6s8t5/fist_page_icon_site3.png" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/4m175hpqx/first_page_site3.png" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/7mi1m1121/last_page_icon_site3.png" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/6vpbg8yop/last_page_site3.png" />
</div>
</div>
The alignment is off because of the size of Read From First Page and Jump To Last Page images. Giving width to the images will place it to the side of left container.
Also use display:inline-block with vertical-align:middle to align the container vertically into middle.
Here is the link that explains the use of display:inline-block
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
Have modified your html code
<div style="width: 974px; margin: 0 auto; background-color: white; padding: 0px;border: 0px solid black;">
<div style="margin: 10px 0px 10px 0px; top: 0px; left: 0px; float: left;border: 1px solid black;">
<a href="/Main/">
<img src="http://s10.postimg.org/7qbv2a6jd/tb_logo_site3.png" width="180" height="86">
</a>
</div>
<div style="float:right;margin-top:10px;border: 1px solid black;">
<img src="http://s10.postimg.org/h8bm2bs7t/patreon_site3.png" width="280" height="42">
</div>
<div style="clear:both;"></div>
<div style="margin-top:35px;margin-left:60px;float: left;border: 1px solid black;">
<img src="http://s10.postimg.org/q9uqtofix/poster_1_site3.png" width="300" height="496">
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/h9ljvqu1l/paper_soho_title_site3.png" width="400" height="114">
</div>
<div style="margin-top:0px;margin-left:30px;border: 1px solid black;display: inline-block;vertical-align: middle;">
<img src="http://s10.postimg.org/mfwp6s8t5/fist_page_icon_site3.png">
</div>
<div style="margin-top:0px;margin-left:30px;border: 1px solid black;height: 100%;display: inline-block;">
<img src="http://s10.postimg.org/4m175hpqx/first_page_site3.png" style="
width: 230px;">
</div>
<div style="display: inline-block;margin-left:30px;border: 1px solid black;vertical-align: middle;">
<img src="http://s10.postimg.org/7mi1m1121/last_page_icon_site3.png">
</div>
<div style="display: inline-block;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/6vpbg8yop/last_page_site3.png" style="
width: 230px;">
</div>
</div>
You have way too many divs, and you gotta adjust the margins/paddings.
Take a look at This link..
Hi friends i am trying to make my repeater look like the img i have attached . I have achieved till the line Total cover but the 50% total cover line giving me headache in alignment. Can someone please guide me on this
<asp:Repeater ID="TreeRepeater" runat="server" DataSourceID="TreeSource" OnItemDataBound="TreeRepeater_ItemDataBound">
<ItemTemplate>
<div>
<div style="float: left; width: 15px; text-align: right;"><%# Container.ItemIndex + 1 %>.</div>
<div style="float: left; width: 230px; border-bottom: 1px solid black;margin-right:5px"><%# Eval("ScientificName") + ", " + Eval("CommonName")%></div>
<div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px"><%# string.Format("{0:0.##}",Eval("PercentageCover")) %></div>
<div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px; vertical-align:text-bottom"><asp:Image ID="TreeDominantImg" runat="server" ImageUrl="~/Images/Xmark.png" Height="16px" Width="16px" Visible='<%# ((Eval("Dominant") == DBNull.Value)?(short)0:(short)Eval("Dominant")) == 1 ? true : false %>' /></div>
<div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black;"><%# Eval("Indicator")%></div>
<div style="clear: both;"></div>
</div>
</ItemTemplate>
<FooterTemplate>
<div>
<div style="float: left; width: 250px;"></div>
<div style="float: left; width: 45px; text-align: center;border-bottom: 1px solid black;"><asp:Label ID="PercentSum" runat="server"/></div>
<div style="float: left;"> = Total Cover</div>
<div style="clear: both;"></div>
</div>
<div>
<div style="display:inline-block; width: 100px;"></div>
<div style="display:inline-block;width:120px;">50% of total cover:</div>
<div style="display:inline-block;width:40px;border-bottom: 1px solid black;"><asp:Label ID="Label6" runat="server"/></span></div>
<div style="display:inline-block;width:120px;">20% of total cover:</div>
</div>
</FooterTemplate>
I prefer to use display: inline-block rather than float: left because if you use float: left, it will exit the current flow of the element. You can change the div in ItemTemplate to this (Just copy the style, not the entire code)
<div>
<div style="display: inline-block; width: 15px; text-align: right;">1.</div>
<div style="display: inline-block; width: 230px; border-bottom: 1px solid black;margin-right:5px"></div>
<div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px"></div>
<div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px;"></div>
<div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black;"></div>
<div style="clear: both;"></div>
</div>
and the FooterTemplate to this (Again just copy the style)
<div>
<div style="display: inline-block; width: 254px;"></div>
<div style="display: inline-block; width: 45px; text-align: center;border-bottom: 1px solid black;"></div>
<div style="display: inline-block;">= Total Cover</div>
</div>
<div>
<div style="display:inline-block; width: 44px;"></div>
<div style="display:inline-block;width:130px;">50% of total cover:</div>
<div style="display:inline-block;width:45px;border-bottom: 1px solid black;"></div>
<div style="display:inline-block;width:130px;">20% of total cover:</div>
<div style="display:inline-block;width:45px;border-bottom: 1px solid black;"></div>
</div>
then it will results just like in this DEMO
Note: If any of the words inside footer wrapped to a new line, just edit the width that you use.
try the following:
<FooterTemplate>
<div>
<div style="float: left; width: 250px;"> </div>
<div style="float: left; width: 45px; height:15px; text-align: center;border-bottom: 1px solid black;"><asp:Label ID="PercentSum" runat="server" Text=" "/></div>
<div style="float: left;"> = Total Cover</div>
<div style="clear: both;"></div>
</div>
<div>
<div style="float: left; width: 60px;"> </div>
<div style="float: left;">50% of total cover: </div>
<div style="float: left; width:40px;border-bottom: 1px solid black; height:15px;text-align: center;"><asp:Label ID="Label6" runat="server" Text=" "/></span></div>
<div style="float: left;"> </div>
<div style="float: left;">20% of total cover: </div>
<div style="float: left; width:40px;border-bottom: 1px solid black; height:15px;text-align: center;"><asp:Label ID="Label1" runat="server" Text=" "/></span></div>
<div style="clear: both;"></div>
</div>
</FooterTemplate>
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>