Центрировать изображение в заголовке? - PullRequest
Новая
       0

Центрировать изображение в заголовке?

0 голосов
/ 27 мая 2020

Я делаю простой веб-сайт с демонстрацией товаров для своего класса и немного застрял в центрировании изображения для заголовка. Я добавлю меню навигации по продукту слева, поэтому я хотел, чтобы мой lo go был по центру, но я не могу его поставить по центру. Что мне следует изменить, чтобы центрировать его, поскольку с моим текущим кодом text-align: center не работает. 

header, footer {
  background-color: lightgray;
  border: solid 1px black;
  overflow: hidden;
  padding: 20px 10px;
}

footer {
  padding: 10px;
  border-radius: 3px;
}

body {
  font-family: Segoe UI, Arial, Helvetica, sans-serif;
  font-size: 16px;
  background-color: darkgray;
}

html, body {
  padding: 0;
  margin: 0;
}

.header a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 26px;
  border-radius: 4px;
}

.header .logo {
  text-align: center;
  max-width: 12%;
  height: auto;
}

.header a:hover {
  background-color: #9B9B9B;
  color: #000000;
}

.header a.active {
  background-color: #767676;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }

  .header-right {
    float: none;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Vape Away</title>

  <meta name="description" content="Vape Juice Product Display">
  <meta name="author" content="Jordan">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="wrapper">
    <header class="header">
      <img src="img/logo.png" class="logo">
      <div class="header-right">
        <a class="active" href="index.html">Home</a>
        <a href="contact/index.html">Contact Me</a>
        <a href="about/index.html">About Me</a>
        <a href="wholesale/index.html">Wholesale Options</a>
      </div>
      <!-- ^ header ^ -->
    </header>

  </div>
</body>

</html>

Ответы [ 2 ]

1 голос
/ 27 мая 2020

Добавить text-align:center в заголовок: 

header, footer {
  background-color: lightgray;
  border: solid 1px black;
  overflow: hidden;
  padding: 20px 10px;
  text-align:center;
}

.header a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 26px;
  border-radius: 4px;
}

.header .logo {
  text-align: center;
  max-width: 12%;
  height: auto;
}

.header a:hover {
  background-color: #9B9B9B;
  color: #000000;
}

.header a.active {
  background-color: #767676;
}

.header-right {
  float: right;
}
<div id="wrapper">
    <header class="header">
      <img src="img/logo.png" class="logo">
      <div class="header-right">
        <a class="active" href="index.html">Home</a>
        <a href="contact/index.html">Contact Me</a>
        <a href="about/index.html">About Me</a>
        <a href="wholesale/index.html">Wholesale Options</a>
      </div>
      <!-- ^ header ^ -->
    </header>
</div>
0 голосов
/ 27 мая 2020

Вы можете сделать, как говорит Мойз. Вы также можете решить свою проблему с помощью гибкого дисплея. 

header,
footer {
  background-color: lightgray;
  border: solid 1px black;
  overflow: hidden;
  padding: 20px 10px;
}

footer {
  padding: 10px;
  border-radius: 3px;
}

body {
  font-family: Segoe UI, Arial, Helvetica, sans-serif;
  font-size: 16px;
  background-color: darkgray;
}

html,
body {
  padding: 0;
  margin: 0;
}

.header a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 26px;
  border-radius: 4px;
}

.header .logo {
  /* text-align: center; */
  max-width: 12%;
  /* height: auto; */
}

.header a:hover {
  background-color: #9B9B9B;
  color: #000000;
}

.header a.active {
  background-color: #767676;
}

.header-right {
  /* float: right; */
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}

.header { /*I took some of your lines into the comment and added this. */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<div id="wrapper">
  <header class="header">
    <img src="https://static.rfstat.com/renderforest/images/v2/logo-homepage/flat_3.png" class="logo">
    <div class="header-right">
      <a class="active" href="index.html">Home</a>
      <a href="contact/index.html">Contact Me</a>
      <a href="about/index.html">About Me</a>
      <a href="wholesale/index.html">Wholesale Options</a>
    </div>
    <!-- ^ header ^ -->
  </header>

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...