Thank you for reading my question.
I still have a lot to learn regarding HTML and CSS, yet I'm trying. However, this brought me to a problem (I searched around a bit, but couldn't find a good answer):
I want to make a menu on the top of my page, as header. However, in the middle of this menu there is an image, as logo.
Failing to get them next to each other correctly, I used them in a list
Here I'm stuck:
- I want the 'MENU ITEM 1-4' to be almost at the middle(height) of the%20image. However the%20image has to stay were it is(so be at the very center, just at the bottom). If possible being able to change its position too if needed.
- I want the 'MENU ITEM 1-4' to be underlined by a 2px high,colored line, not sure how to do that.
It'll have to look something like this:
empty space THE IMAGE MENU ITEM 1 MENU ITEM 2 THE IMAGE MENU ITEM 3 MENU ITEM 4 empty space THE IMAGE
Problem courtesy of: Pepe
Solution
I'm not sure whether I understood the question. But to my answer would be:
And style it like so:
ul li{
margin-right:20px;
line-height:200px;
float:left;
}
ul li img{
height:200px;
width:auto;
}
ul li a {
text-decoration:none;
border-bottom:2px solid red;
} You need to put line height equal to the%20image height and then vertically align it. To underline text with a color you chose you will need to add border-bottom
.
Here you can see jsFiddle
Solution courtesy of: dinodsaurus
