Menu
I have two float elements, right and left.
The parent element for all of them is text-align: center, margin: auto:
<div class="test"> 1. text <br> <span id='small_font10' style='float: left;'>999</span> <a class='writeSComment' id='small_font10' data-id='<?php echo $id; ?>' style='cursor: pointer'> <strong>2. text</strong> </a> <span id='small_font10' style='float: right;'> Follow me </div> .test{ width: 500px; text-align: center; margin: auto; background: red; } http://jsfiddle.net/KRWNs/
If you see the 1. text, there's the center. The 2. text is moving ( being affected from the float elements) to the left as you can see, and are not center.
How can I make this align as the normal above (as the 1. text), without being affected by the float elements on the right and left side?
509
To center the text using float we can use margin-left or margin-right and make it 50% , like below.
The CSS float property is used to set or return the horizontal alignment of elements. But this property allows an element to float only right or left side of the parent body with rest of the elements wrapped around it. There is no way to float center in CSS layout.
First, remove the float attribute on the inner div s. Then, put text-align: center on the main outer div . And for the inner div s, use display: inline-block . Might also be wise to give them explicit widths too.
float moves the element itself, text-align moves the text inside the element.
You'll need to use something other than float to stick the elements to the sides. As it is, they are behaving as they are supposed to. Here's an updated example using absolute positioning to stick to the sides. Very long content will not honor the elements, however.
Alternatively, as seen in this test, you need to ensure that both floats are the same width.
The fact that the outer element is "margin auto" is irrelevant.
140
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
