У меня есть логотип, который является ссылкой на мою домашнюю страницу
Я хочу расположить его по центру, чтобы только само изображение было ссылкой, а пробелы по бокам логотипа - нет.
Я знаю, что могу использовать display: block или display:table, но это делает всю строку ссылкой.
Можно ли центрировать элемент, но сохранить его исходный размер?

Вот соответствующий код:

<header class="site-header" id="site-header" role="banner">
        <a href="https://smartbyte.blog">
            <img class="header-image" src="image.png" height="270" width="600" />
        </a>

Соответствующий класс: header-image

css
0
SagiLow 2 Янв 2018 в 00:32

2 ответа

Лучший ответ

Если вы хотите управлять своим изображением без добавления стиля в заголовок, вы можете просто добавить фиксированную ширину к a и сделать его display:block (так как вы знаете ширину своего изображения), а затем просто используйте маржа: авто :

a {
  display: block;
  max-width: 400px;
  width:100%;
  margin: auto;
  border: 1px solid red; /* To show it only takes width of image */
}

a img {
  vertical-align: top; /* To remove white space */
  max-width:100%;
}
<header class="site-header" id="site-header" role="banner">
  <a href="https://smartbyte.blog">
    <img class="header-image" src="https://lorempixel.com/400/400/" height="270" width="400" />
  </a>
</header>

Или используйте display:table, и вам не нужно указывать ширину:

a {
  display: table;
  margin: auto;
  border:1px solid red; /* To show it only takes width of image */
}
a img {
 vertical-align:top; /* To remove white space*/
 max-width:100%;
}
<header class="site-header" id="site-header" role="banner">
  <a href="https://smartbyte.blog">
    <img class="header-image" src="https://lorempixel.com/400/400/" height="270" width="400" />
  </a>
</header>
1
Temani Afif 1 Янв 2018 в 22:07

Да. Если вы используете элемент img, просто заключите его в элемент a, который сам находится внутри другого элемента (например, div).

<div class="link-container">
  <a href="homepage.com">
    <img alt="My website" src="image.png">
  </a>
</div>

И код CSS:

.link-container {
  text-align: center;
}
2
Louis-Marie Matthews 1 Янв 2018 в 21:39