I need to align 3 different elements in my div.
They are in a ul list:
Left, Center and Right.
I tried to use float: right for the right element, and margin: 0 auto with a width for the element in the center. But still it doesn't align automatically.
The elements can also be images, not only text.
http://jsfiddle.net/PwmrC/
display:table and table-cell may be your solution. Here is the fiddle demo.
Later edit: Reworked example
Related
My <ul> element has some <li>'s containing text, and one containing an image. I want them to appear in a single line, centered horizontally within the parent element, and also their <li> contents centered vertically and horizontally. I have the following code:
http://codepen.io/littlemissintrovert/pen/NqqLRr
By far, it's going great, however, I have an issue with the <li> containing an <img>. It's positioned higher than other <li> elements.
I can't find much resources to help me with this issue. Maybe I suck with searching but I found this link: List items appearing below other list items containing images. It seems we have the same problem and someone suggested there to use:
display: table-cell;
vertical-align: middle;
However, when I try to use it, I am unable to center the <ul> horizontally, relative to the size of its parent container. Plus, I can't space out my <li> elements using margin.
As much as possible, I really want to avoid defining the width. I want my elements to span across the screen 100%.
for fixing img issue
Add display:block to the a tag as it is a inline element
Add vertical-align:middle for the img tag as img is a inline element it will align it vertically middle
you can also use this technique to add the margin on the left side of the li
#mainnav li + li{
margin: 0 0 0 3em;
}
which will only give style to the next element
demo - http://codepen.io/victorfdes/pen/pJJORw
Just add vertical-align:middle to image will solve your issue:
Check your updated Codepen Here.
I am able to center horizontal list with text-align:center, but I wonder how can I keep it centered inside container, but has rows aligned left.
My container has percent width, so I need it working when resizing window and blocks are reordering
Please check the sample image below to understand my problem:
UPDATE:
Please find JsFiddle as per request
I need to center my <ul> inside div.container
Use this:
ul {
margin: auto;
}
li {
float: left;
}
See this fiddle:
You already know to center the <ul> with margin: auto;
The key is to adjust the <li> within it.
You can do that by using float: left;
Alternatively: you can set display: inline-block;
Both have a similar effect, but aren't identical. Play w/it.
By providing margins & percentage widths, you can play w/size and separation of the elements.
Since these are all block-level elements, they'll stack up & wrap automatically.
By floating or changing display of the <li> you keep them left-aligned within their parent element (the <ul>).
Also, by using separate CSS classes instead of targeting the <li> element directly, you leave things flexible in case you want to have a right-aligned list, or some other options later.
Wrap your boxes within another div.
You can then center that div with display: block; margin: 0 auto;, while keeping the boxes left-aligned.
Other than using display: inline-block and text-align:center, do we have anyway to make 2 div center inside a div wrapper? I don't want my text to be center.
Use text-align: center; on the wrapper div and text-align:left; on the child divs.
you can also use the margin: 0 auto; on the child divs instead of using text-aligns. But they will each have to have a width (px or %) and each div will be in its own row.
Using CSS margin is best way of centering a DIV. Add another DIV to hold the two centered ones with:
margin: 0 auto;
Make a 2nd wrapper for the two divs, with a specified width and set it's margin auto.
I need to align image at the middle of the page. I used margin:auto to align middle horizontally.
How do I align the div block middle vertically. I have below conditions to follow.
I can not mentioned width and height of div or image.
I can not use margin-top in pixels.
Here is my jsfiddle.
You were doing it almost right. Here's your fixed fiddle http://jsfiddle.net/joplomacedo/cDD7m/4/
The thing is, you need an element with display: table wrapping one with display: table-cell for the table-cell to behave like it's supposed to.
Will background image technique fit your needs?
background: url(my-image.jpg) center center no-repeat;
I am really struggling with this and I have no idea why. I want to have text and an image on 1 line and centered inside a 100% width div. Here's a jsfiddle..
http://jsfiddle.net/JnbeJ/
floated elements automatically become block-level. It's impossible to center them via text-align: center. The only way for you to do is to make them inline-block like so: display: inline-block. I added vertical-align: top; for the h to be at the top. The working example is here: http://jsfiddle.net/skip405/JnbeJ/4/
Your image and text can't float left and be centred at the same time...
You have a div that is 100% width (btw/ divs are 100% to begin with), and trying to center a div inside it that is also 100% width. You can either put a width on the inner div, or make it inline-block.
Updated fiddle.
You are using a wrapper with class name "centered" so instead of making both elements (display: inline-block;), just add this to style your wrapper:
.centered {display: inline-block; margin: 0 auto;}
You also have an additional (text-align: center;) in your containers css that does not need to be there.