Как изменить относительное положение изображения в теге <div> - PullRequest
Новая
       4

Как изменить относительное положение изображения в теге <div>

0 голосов
/ 07 января 2019

Я пытаюсь выровнять по вертикали и изображение в горизонтальной строке меню. В идеале я хочу установить отступы / поля изображения, используя встроенный CSS.

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

<style>
body {
background: #000000 url("/images/background.jpg") no-repeat fixed;background-size:cover;
width: 1000px;
}

#menu a {
text-decoration: none;
color: white;
padding-left: 25px;
padding-right: 25px;
}
#menu a:hover {
color: red;}    
</style>
</head>
<body>  
<div id="menu"><a href="/who-is-it-for.html">WHO IS IT FOR</a><a href="/contact.html">BOOK NOW</a><a href="/team-building-locations.html">LOCATIONS</a>

<a href="/index.html"><img src="/images/logo-menu.png" alt="home" width="90" onMouseOver="this.src='/images/logo-menu-rollover.png';" onMouseOut="this.src='/images/logo-menu.png';"></a>

<a href="/team-building-photos.html">PHOTOS</a><a href="/team-building-pricing.html">PRICING</a><a href="/team-building-locations.html">NEWS</a><a href="/faqs.html">FAQ</a></div>

1 Ответ

0 голосов
/ 07 января 2019

Просто используйте vertical-align: top для a элемента. 

<style>
body {
background: #000000 url("/images/background.jpg") no-repeat fixed;background-size:cover;
width: 1000px;
}
	
#menu a {
text-decoration: none;
color: white;
padding-left: 25px;
padding-right: 25px;
vertical-align: top /* added this option */
}

#menu a:hover {
color: red
}

img {
  margin-top: 50px /* whatever you want */
}
</style>
</head>
<body>	
<div id="menu"><a href="/who-is-it-for.html">WHO IS IT FOR</a><a href="/contact.html">BOOK NOW</a><a href="/team-building-locations.html">LOCATIONS</a>
	
<a href="/index.html"><img src="//via.placeholder.com/100/4B89DA/FFFFFF" alt="home" width="90" onMouseOver="this.src='/images/logo-menu-rollover.png';" onMouseOut="this.src='/images/logo-menu.png';"></a>

<a href="/team-building-photos.html">PHOTOS</a><a href="/team-building-pricing.html">PRICING</a><a href="/team-building-locations.html">NEWS</a><a href="/faqs.html">FAQ</a></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...