HTML and CSS3 menu questions

综合编程 2018-07-13

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

CSS3 Recipes

责编内容by:CSS3 Recipes (源链)。感谢您的支持!

您可能感兴趣的

CSS3 :default伪类选择器简介 这篇文章发布于 2018年03月15日,星期四,01:17,归类于css相关。 阅读 86 次, 今日 86 次 byzhangxinxu fro...
Unlocking the Potential of HTML5 & CSS3 The release of HTML5 and CSS3 was nothing short of an evolutionary leap, yet few...
What is the difference between E F and E ~ F css3 ... After reading W3C documentation on CSS3 selectors, I am still...
Create an arrow in css3 I know how to create arrows outside the div by using the psedo class but I need ...
scale() CSS3 property moves other elements on hove... I'm trying to make a gallery, however, I'm having a problem with scale property....