невозможно создать вертикальное меню с изображением

Question

невозможно создать вертикальное меню с изображением

0

Я работаю над своим проектом в колледже, для которого я должен добавить вертикальный бар в моем проекте. Я много искал в Google, но не смог найти код для создания вертикального меню с изображениями. Не могли бы вы рассказать мне, как я могу создать это меню?

Я хочу создать свое меню следующим образом:

Я пытаюсь так, но текст становится помещенным внизу. Я хочу его посередине.

<ul class="menu"> 
            <li>
                <a href="#"><p><img src="images/sys.png" width="30" height="30">Home</p></a>
            </li>
        </ul>

Amit Kumar 21 март 2014, в 23:37

Источник

Теги:

jquery

html

css

menu

2 ответа

2

Основная идея заключается в том, что вы можете вертикально выравнивать текст и изображение с помощью дисплея: встроенный блок и вертикальный-выравнивать: средний.

<ul class="nav">
    <li class="roadster"><a href="#"><span class="brand">Roadster</span><span class="image"><img src="http://png-3.findicons.com/files/icons/1012/racing_cars/128/mitsubishi_lancer.png" alt=""></span></a></li>
    <li class="roadster"><a href="#"><span class="brand">Roadster</span><span class="image"><img src="http://png-3.findicons.com/files/icons/1012/racing_cars/128/mitsubishi_lancer.png" alt=""></span></a></li>
</ul>

http://jsfiddle.net/YVp8E/11/
http://jsfiddle.net/YVp8E/11/show

.nav {
   width: 25em;
}
.nav li {
  display: block; 
}
.nav li a {
    color: #686868;
    display: block;
    padding: 10px 0;
}
.nav li {
    background: url(https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/forward-128.png) no-repeat 100% 50%;

}
.nav li {
    border-top: 1px solid #ccc; 
}
.nav li:first-child {
    border-top: none; 
}
.nav span {
  display: inline-block;
  vertical-align: middle; 
}
.nav .image {
  padding-left: 60px;
}

JohanVdR 21 март 2014, в 21:02

Ещё вопросы

Kheema Pandey · Accepted Answer · 2014-03-21T20-39-00.000Z

вы можете использовать :after псевдоэлемента для достижения эффекта желания. Проверьте демонстрацию.

<ul class="menu"> 
  <li><a href="#">Boxter</a></li>
  <li><a href="#">Cayman</a></li>
  <li><a href="#">911</a></li>
</ul>

/ --Here является CSS---- */

ul{margin:0; padding:0; list-style-type:none;}
li a
{
  display:block;
  border-bottom:1px solid grey;
  padding:25px 0;

}
li{ position:relative;}

li a:after
{
  content:">";
  position:absolute;
  right:20px;
  top:30px;
  vertical-align:middle;
}
li:nth-child(1):after
{
content:" ";
position:absolute;
right:50px;
top:0; 
background:url("http://lorempixel.com/70/70") 0 20px no-repeat;
width:70px;
height:70px;
vertical-align:middle;
}
li:nth-child(2):after
{
content:" ";
position:absolute;
right:50px;
top:0; 
background:url("http://placehold.it/70x70") 5px 20px no-repeat;
width:70px;
height:70px;
vertical-align:middle;
}