Why does the text not get center aligned when placing an image in the li? If I remove the img the text gets centered. I am trying to achieve both being placed centered.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li>
<span class="text">Home</span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII="/>
</li>
<li>
<span class="text">News</span>
</li>
</ul>
</body>
</html>
The text-align property is used for aligning elements horizontally, not vertically.
Just change your <ul> element to a flexbox using display: flex; and then use the align-items property to vertically center the <li> items. Similarly, change your <li> elements to a flexbox and use the same property to vertically center the text and the icon.
Also, you need to change your css selector li hover to li:hover.
Check and run the following Code Snippet for a practical example of the above:
ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;
display: flex;
width: 100%;
height: 50px;
align-items: center;
}
li {color: white;text-decoration: none;
display: flex;
align-items: center;
}
li:hover {background-color: #111;}
<ul>
<li>
Home
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII=" />
</li>
<li>News</li>
</ul>
if you want to center the image use :
img{
margin: auto;
}
then center text using
text-align: center;
There are multiple ways that you can achieve vertical and horizontal alignment.
Flex
As #AndrewL64 explained, you can use flex and use the align-items property to center the element. This is the more modern approach and most recommended for creating a responsive layout.
Block
You can set the display property of the element to block and use margin: 0 auto to center the element vertically and horizontally.
Inline-block/inline
Or you can set the display property of the element to inline-block or inline upon which you can use the text-align: center property. It is important to note that this property only acts upon the inner content of block containers and only affects inline or inline-block elements.
This article by Sarah Cope does well to explain the mechanics of such properties
In fact the image is being also centered as part of the text because img elements are displayed inline by default.
Depending on your goal you could have the img on it's own li or position them absolutely like this:
li {
position: relative;
padding-left: 30px;
}
li img{
position: absolute;
left: 0;
}
https://jsfiddle.net/01ecvxfp/
Related
"Old" Newbie here. I have not been coding css or html in about 10 years now. Use to be good at it and really like doing it as well. So now during covid and lockdown I decided to get back at it again. Currently just re-learning everything, and trying to build up a website from scratch.
Having some issues with getting menu/navigation links in position on the same line as my h1 title. Have tried about everything, like ex. display: inline-block; and also read a lot of posts here. But nothing seems to be working. So I hope somebody here that have any suggestions?
Thank you so much!
If you inspect the tag h1, you'll see there is a standard margin bottom which the browser applied to h1 tag. You can erase it directly on inspect window, I guess that is your problem. =))
You can try to create a div which contains both your nav items and the header, this should use display:flex and align-items: center, the justify-content will set the horizontal alignment of everything inside this container
Then float the nav to the left, and they should be aligned, from here you can add as much styles as you want
Good luck!
.barContainer {
display: flex;
justify-content: left;
position: fixed;
width: 100%;
align-items: center;
font-family: helvetica;
}
h1 {
font-size: 15px;
}
nav {
background-position: center;
padding: 1%;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 1rem 1rem;
text-decoration: none;
font-size: 15px;
}
nav li, nav ul {
list-style: none;
}
<div class="barContainer">
<nav>
Item 1
Item 2
Item 3
</nav>
<h1>My Header</h1>
</div>
You can use the float property to float elements within a parent element. Choose right or left to choose which side the element will float to. When this property is used, the display property of the floating elements is ignored when using block, inline, or inline-block.
In the parent element, use the overflow: hidden property, so that it will be at the same height as the largest element contained in it. When a parent element only has floating elements inside it, and does not use the overflow: hidden property, its height will be 0 and the elements below will overlap it.
.content {
overflow: hidden;
font-family: sans-serif;
}
.menu {
float:right;
margin-top: 20px;
}
.menu li {
display: inline;
list-style: none;
margin: 10px;
}
h1 {
float:left;
}
<div class='content'>
<h1>My Title</h1>
<nav class='menu'>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
That is the list that has the things in it.
nav ul li{
list-style: none;
float: left;
}
nav ul li a{
text-decoration: none;
display: block;
float: left;
padding: 5px 15px;
color: white;
}
Those are the CSS things it currently has, I can't seem to make them be centered. I've looked around for about an hour, but I'm pretty much not having any luck with my current skill in this field.
Flexbox is a good way to make things go where you want.
nav ul {
display: flex;
flex-direction: row;
justify-content: center;
}
nav li {
margin: 0 30px;
}
You want to make the <li>'s line up and sit in the center. First you need to grab their parent (the <ul>) and tell it to use Flexbox.
Flex direction can be row or column. You want them to line up in a row.
Once they're lined up, justify them in the center.
The margin on the <li> itself just keeps them from overlapping.
Using the float: css style directly moves the content to its set side. To center an element, use auto set for your margins or padding. margin-left: auto; margin-right: auto; will center an element within it's container by having the same amount of margin or padding on both sides.
a quicker way to do this is margin: y-margins auto; the first value is your margin-top and margin-bottom values, the second value is your left and right.
to center text within its container, such as a <p> tag, use text-align: center;
vertical-align has always given me problems in the past and once again I'm met with a problem that I don't know how to solve.
I have this html:
<ul id="council-slider">
<li class="col-md-12" style="display: block">
<img src="somesource" />
<div class="council-spacer"></div>
<p>text content goes here</p>
</li>
</ul>
CSS:
#council-slider {
margin: 0 auto;
list-style: none;
min-height: 300px;
max-height: 400px;
}
#council-slider li img {
float: left;
height: auto;
width: 25%;
margin: 5px;
}
.council-spacer {
height: 300px;
width: 100px;
float: left;
}
#council-slider li p {
margin-top: 100px;
}
I want to be able to vertically align the image in the middle. The text is multiple lines that wrapped so using line-height will not work in this situation. Also the images can have varying heights.
There are multiple list items; I just used one in the example to simplify and reduce the html.
You should read up on where the vertical-align property has the ability to be applied.
Quoting from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
Since your element is not being displayed as either inline or table-cell vertical-align: middle; will not do you any good here.
You can, however, set your <div> styling to display: table-cell; and then vertical-align: middle
Alternatively, this can be achieved with CSS3 as hars pointed out, just make sure your user's browsers support CSS3
.valign-middle {
position: relative;
top: 50%;
Transform: translateY (-50%);
}
The way this works -
Set position relative to the parent/container (i.e. <li> in your case)
Move the image that you want to vertically align, down 50% of the container height
Move the image up 50% of the height of the image
Add a class to your img as below.
.verticallyCenter {
position: relative;
top:50%;
Transform:translateY (-50%);}
Refer This
Without seeing your actual css code it is hard to say, but you should use vertical-align: middle for all objects that you want to align and you may need to change the display of your paragraph to display: table-cell.
Will be easier using flexbox: display: flex; and align-items: center;
Demo
#council-slider {
list-style: none;
}
#council-slider li{
display: flex;
margin: 10px 0;
align-items: center;
}
.council-spacer {
width: 20px;
}
I did take a look at loot of similar questions here, but no one helped me solve my problem. I have a problem with vertically align the img on the left side in the li cell (this is working), but i can't align the text next to img. The line-height from ul li div is messing my things.
Here is a Jsfiddle.
What i wan't to achive is this:
Vertically and horizontally align img in 1/3 of the li cell on the left side.
Vertically and horizontally align text in 2/3 of the li cell, text align should be left. Text can be multiline and with bolded heading in first line.
You can also edit html code, if it is necessary.
HTML
<div class="product_banner_right">
<div class="product_banner_right title">
<h3>LOOK DOWN</h3>
</div>
<ul>
<li>
<img src="http://dummyimage.com/26x23/000/fff.png" alt="" />
<p><span>HEADING1</span>first line text
<br>second line text</p>
</li>
<li>
<img src="http://dummyimage.com/48x9/000/fff.png" alt="" />
<p><span>HEADING2</span>first line text</p>
</li>
<li>
<img src="http://dummyimage.com/40x24/000/fff.png" alt="" />
<p><span>HEADING3</span>first line</p>
</li>
<li>
<img src="http://dummyimage.com/46x17/000/fff.png" alt="" />
<p><span>HEADING4</span>first line text
<br>second line text
<br>third line text</p>
</li>
</ul>
</div>
CSS
.product_banner_right {
font-size: 1.2em;
position: relative;
width: 250px;
}
.product_banner_right .title {
height: 40px;
background: #1b3a6f;
}
.product_banner_right .title h3 {
text-align: center;
line-height: 40px;
}
.product_banner_right ul {
margin: 0;
padding: 0;
}
.product_banner_right ul li {
display: block;
height: 70px;
border: 1px solid black;
}
.product_banner_right ul li img {
vertical-align: middle;
padding: 0 10px;
max-width: 50px;
}
.product_banner_right ul li p {
vertical-align: middle;
display: inline-block;
}
.product_banner_right ul li p span {
font-weight: bold;
}
change the following styles to :
.product_banner_right {
font-size: 100%;
position: relative;
width: 250px;
}
.product_banner_right ul li img {
vertical-align: middle;
padding: 0 4%;
width: 11%;
max-width: 50px;
}
.product_banner_right ul li p {
vertical-align: middle;
display: inline-block;
width: 80%;
}
the result:
I have rewrote your html to accomodate the changes.
I have applied two options:
variable height list items.
fixed height list items with overflow.
Fixed height list items
CLICK FOR DEMO
This option is fully browser compatible but would require manually adjustment of the top margin for each list item.
Alternatively this option could still be used with the box flex model described below.
Fix height of list item and add scroll on overflow:
height:70px;
overflow:auto;
Variable height list items
CLICK FOR DEMO
This option relies on css3 flex box model:
display:flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
justify-content:center;
-webkit-justify-content:center;
Please note flex box requires browser support. It is now highly compatible with modern browsers however old versions of the useless outdated browser ie will not support it.
Users of these browsers will still have a nice viewing experience however the images will be aligned at the top of each list box and not the center.
i don't know if this is the best approach but it looks allready a bit better than yours.
i just changed the following:
.product_banner_right ul li img {
vertical-align: middle;
padding: 0 10px;
/* CHANGED*/
width: 33%;
}
.product_banner_right ul li p {
vertical-align: middle;
display: inline-block;
/* CHANGED*/
width: 66%;
position:absolute;
}
but you still have to get the text to fit into the table.
hope it helped, cheers!
You can make the texts in separate classes and then arrange the as you wish using margin
This question already has answers here:
Can't Center My Navigation
(2 answers)
Closed 8 years ago.
I'm trying to center this menu. How come i can't center it with the two types of ways i tried to center it? I tried to center it with html and css as shown with comments. I'm just wondering why, I could probably figure it out but it would take me a long time. I know I can fix it with position: absolute;top: 50%;left: 50%; But even that, how do i use that in a good way? how do i use absolute positioning correctly and in a good way? Also what is relative position? What is that used for and how does that compare to absolute? Plz and thank you.
Here's my CSS:
ul {
text-align: center; /* How come this doesn't center it? */
padding: 4px;
list-style-type: none;
margin: 0;
overflow: hidden;
}
li {
float: left;
}
a.menuItem:link,
a.menuItem:visited {
display: block;
width: 120px;
font-weight: bold;
color: white;
background-color: #800000;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a.menuItem:hover,
a.menuItem:active {
background-color: black;
}
Here's my HTML:
<center> <!-- And how come this doesn't center it? -->
<ul background="/victoria/cutiepie2.jpg">
<li>Call</li>
<li>Text</li>
<li>Home</li>
<li>News</li>
<li>Media</li>
<li>Downloads</li>
<li>Forum</li>
</ul>
</center>
A UL element is a block level element, it therefore cannot be influenced by text-align: center which only works on inline elements such as span, strong, em etc. It can be applied to a block so that any textual or inline elements inside it are centered but it will not center the block. A block level element will expand to fill all of the horizontal space therefore cannot be centered without first defining it's width.
A better solution would be to place a width on the menu and then set the horizontal margins to auto:
ul {
padding: 4px;
list-style-type: none;
overflow: hidden;
width: 960px;
margin: 0 auto;
}
Also center tags are deprecated but in their day, they were also used to center text.
Here is a fiddle showing the centered menu: http://jsfiddle.net/7Hjvc/1/
Remove the float:left from your LI, and add display:inline, e.g
li {
display:inline
}
And remove display:block from your links.
The text-align:center on your UL was not centering your LIs because LI are block elements and you were applying a float to them.