Menu
My only problem is making them line up three-across and have equal spacing. Apparently, spans can not have width and divs (and spans with display:block) don't appear horizontally next to each other. Suggestions?
<div style='width:30%; text-align:center; float:left; clear:both;'> Is what I have now.
832
To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
Solutions with CSS properties If you want to align a <span> element to the right of the <div>, you can use some CSS. Particularly, you need to use the float property with the “right” and “left” values.
Text Align To center an inline element like a link or a span or an img, all you need is text-align: center .
The CSS just sizes the div, vertically center aligns the span by setting the div's line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.
You can use divs with the float: left; attribute which will make them appear horizontally next to each other, but then you may need to use clearing on the following elements to make sure they don't overlap.
196
You can use
.floatybox { display: inline-block; width: 123px; } If you only need to support browsers that have support for inline blocks. Inline blocks can have width, but are inline, like button elements.
Oh, and you might wnat to add vertical-align: top on the elements to make sure things line up
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
