Почему flexbox не центрирует мое изображение, как другие элементы в div?

Я пытаюсь центрировать #login-logo внутри #login-content div с помощью flexbox, но изображение — единственное, что не центрировано. Я думал, что text-align:center позаботится об этом.

Форма, кнопка и абзац в одном и том же div оформлены именно так, как я хочу, — расположены друг над другом и центрированы по горизонтали и вертикали.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
}

body {
  min-height: 100%;
  min-width: 100%;
  background: url("images/newnewgirls.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

.container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.container2 {
  width: 80%;
  margin: auto;
  text-align: center;
}

header {
  padding: 1em;
  margin: 0;
}

header #branding {
  float: left;
}

header #branding img {
  width: 55%;
}

header nav {
  float: right;
  margin-top: 0.5em;
}

header nav li {
  display: inline;
  padding: 1em;
}

header nav li a {
  text-decoration: none;
}

#login-modal {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#login-content {
  height: 80%;
  width: 25%;
  position: relative;
  background-color: white;
  border-radius: 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.close {
  position: absolute;
  top: 0;
  right: 5%;
  cursor: pointer;
  font-size: 30px;
}

.login-input {
  display: block;
  margin: 0 auto 1.5rem auto;
}

#login-logo {
  height: 3rem;
  width: 3rem;
}

<!DOCTYPE HTML>
<html>

<head>
  <link rel = "apple-touch-icon" sizes = "180x180" href = "images\free_horizontal_on_white_by_logaster.jpg">
  <link rel = "icon" type = "image/jpg" sizes = "32x32" href = "images\free_horizontal_on_white_by_logaster.jpg">
  <link rel = "icon" type = "image/jpg" sizes = "16x16" href = "images\free_horizontal_on_white_by_logaster.jpg">
  <meta name = "msapplication-TileColor" content = "#da532c">
  <meta name = "theme-color" content = "#ffffff">
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <link rel = "stylesheet" href = "resolve.css">
  <title>Resolve - Real Women, Real Feedback</title>
</head>

<body>
  <header>
    <div class = "container">
      <div id = "branding">
        <a href = "indexresolve.html"><img src = "images/lasttry.png" alt = "resolvelogo"></a>
      </div>
      <nav>
        <li><a href = "indexresolve.html">Home</a></li>
        < <li><a href = "howitworks.html">How It Works</a></li>
          <li><a href = "contact.html">Contact</a></li>
          <li><a href = "faq.html">FAQ</a></li>
          <li><button id = "login" class = "button">Log In</button></li>
          <div id = "login-modal">
            <div id = "login-content">
              <span class = "close">&times;</span>
              <img id = "login-logo" src = "images\free_horizontal_on_white_by_logaster.jpg">
              <form>
                <input class = "login-input" type = "text" placeholder = "username">
                <input class = "login-input" type = "password" placeholder = "password">
                <button>Log In</button>
              </form>
              <p>By clicking log in, you agree to our <a href = "terms.html">Terms</a>, <a href = "privacy.html">Privacy Policy</a>, and our <a href = "cookie.html">Cookie Policy</a>.</p>
            </div>
          </div>
      </nav>
  </header>
  <section>
    <div class = "container2">
      <div>
        <h1>Guys</h1>
        <h2>fajfsda klfsdajfodisjflkd oisdjfklewjf oisdjfsakfj akfjfslkdja;fj sd;akfjdkfjsdakfj saifjsdakfs.</h2>
        <button>Get Started</button>
      </div>
      <div>
        <h1>Ladies</h1>
        <h2>dklasdjfs kdsjdlk jfsalkjf las;fjdaa fdaksjdk skjfsidjf akldfjskl fjsdlkfjskdlfjsdifjdkf dkfjsdijf s </h2>
        <button id = "login">Get Started</button>
      </div>
      <div class = "appad">
        <h2>App Coming Soon!</h2>
      </div>
    </div>
    <script src = "resolve.js"></script>
</body>

</html>

Попробуйте margin:0 auto для своего #login-logo класса.

— 22.02.2019 02:54

html css flexbox alignment

22.02.2019 02:47

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

831

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вы можете сделать логотип в центре, просто добавив свойство margin как:

#login-logo {
    height: 3rem;
    width: 3rem;
    margin: 0 auto;
}

22.02.2019 02:56

Вам нужно обернуть изображение в div, чтобы flex правильно к нему применялся, как в приведенном ниже коде.

Альтернативой также может быть добавление:

align-self: center

к самому изображению

*{
	margin:0;
	padding:0;
}

html, body{
	box-sizing:border-box;
	overflow:hidden;
	height:100%;
}

body{
	min-height:100%;
	min-width:100%;
	background: url("images/newnewgirls.jpg");
	background-size:100% 100%;
	background-repeat: no-repeat;
	background-position:center center;
	position:relative;
 
}
.container{
	height:100%;
	width:100%;
	overflow:hidden;
}

.container2{
	width:80%;
	margin:auto;
	text-align:center;
}

header{
	padding:1em;
	margin:0;
}
header #branding{
	float:left;
}

header #branding img{
	width:55%;
}


header nav{
	float:right;
	margin-top:0.5em;
}

header nav li{
	display:inline;
	padding:1em;
}

header nav li a{
	text-decoration:none;
}

#login-modal{
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, 0.5);
	position: absolute;
	top:0;
	left:0;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;

}

#login-content{
	height:80%;
	width:25%;
	position:relative;
	background-color:white;
	border-radius:2%;
	display:flex;
	flex-direction: column;
	justify-content:center;
	text-align:center;
}

.close{
	position:absolute;
	top:0;
	right:5%;
	cursor:pointer;
	font-size: 30px;
}

.login-input{
	display:block;
	margin: 0 auto 1.5rem auto;
}

#login-logo{
	height:3rem;
	width:3rem;
}

<!DOCTYPE HTML>
<html>
<head>
	<link rel = "apple-touch-icon" sizes = "180x180" href = "images\free_horizontal_on_white_by_logaster.jpg">
	<link rel = "icon" type = "image/jpg" sizes = "32x32" href = "images\free_horizontal_on_white_by_logaster.jpg">
	<link rel = "icon" type = "image/jpg" sizes = "16x16" href = "images\free_horizontal_on_white_by_logaster.jpg">
	<meta name = "msapplication-TileColor" content = "#da532c">
	<meta name = "theme-color" content = "#ffffff">
	<meta charset = "UTF-8">
	<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
	<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
	<link rel = "stylesheet" href = "resolve.css">
	<title>Resolve - Real Women, Real Feedback</title>
</head>
<body>
	<header>
		<div class = "container">
			<div  id = "branding">
				<a href = "indexresolve.html"><img src = "images/lasttry.png" alt = "resolvelogo"></a>
			</div>
			<nav>
				<li><a href = "indexresolve.html">Home</a></li><
				<li><a href = "howitworks.html">How It Works</a></li>
				<li><a href = "contact.html">Contact</a></li>
				<li><a href = "faq.html">FAQ</a></li>
				<li><button id = "login" class = "button">Log In</button></li>
				<div id = "login-modal">
					<div id = "login-content">
						<span class = "close">&times;</span>
            <div id = "login-logo-container">
						<img id = "login-logo" src = "https://www.thegamecrafter.com/overlays/smallsquaretile.png">
            </div>
						<form>
							<input class  = "login-input" type = "text" placeholder = "username" >
							<input class  = "login-input" type = "password" placeholder = "password">
							<button>Log In</button>
						</form>
						<p>By clicking log in, you agree to our <a href = "terms.html">Terms</a>, <a href = "privacy.html">Privacy Policy</a>, and
						our <a href = "cookie.html">Cookie Policy</a>.</p>
					</div>
				</div>
			</nav> 
		</header>
	<section>
		<div class = "container2">
			<div>
				<h1>Guys</h1>
				<h2>fajfsda klfsdajfodisjflkd oisdjfklewjf oisdjfsakfj akfjfslkdja;fj sd;akfjdkfjsdakfj saifjsdakfs.</h2>
				<button>Get Started</button>
			</div>
			<div>
				<h1>Ladies</h1>
				<h2>dklasdjfs kdsjdlk jfsalkjf las;fjdaa fdaksjdk skjfsidjf akldfjskl fjsdlkfjskdlfjsdifjdkf dkfjsdijf s  </h2>
				<button id = "login">Get Started</button>
			</div>
			<div class = "appad">
				<h2>App Coming Soon!</h2>
			</div>
		</div>
		<script src = "resolve.js"></script>
</body>
</html>

Это работает! Но почему я должен оборачивать изображение в div, чтобы флексбокс работал, но не для других элементов?

— 22.02.2019 03:12

22.02.2019 02:57

В столбецflexbox для выравнивания по горизонтали вы можете использовать align-items: center для логотип в контейнере #login-content — см. демонстрацию ниже:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
}

body {
  min-height: 100%;
  min-width: 100%;
  background: url("images/newnewgirls.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

.container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.container2 {
  width: 80%;
  margin: auto;
  text-align: center;
}

header {
  padding: 1em;
  margin: 0;
}

header #branding {
  float: left;
}

header #branding img {
  width: 55%;
}

header nav {
  float: right;
  margin-top: 0.5em;
}

header nav li {
  display: inline;
  padding: 1em;
}

header nav li a {
  text-decoration: none;
}

#login-modal {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#login-content {
  height: 80%;
  width: 25%;
  position: relative;
  background-color: white;
  border-radius: 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center; /* ADDED */
}

.close {
  position: absolute;
  top: 0;
  right: 5%;
  cursor: pointer;
  font-size: 30px;
}

.login-input {
  display: block;
  margin: 0 auto 1.5rem auto;
}

#login-logo {
  height: 3rem;
  width: 3rem;
}

<!DOCTYPE HTML>
<html>

<head>
  <link rel = "apple-touch-icon" sizes = "180x180" href = "images\free_horizontal_on_white_by_logaster.jpg">
  <link rel = "icon" type = "image/jpg" sizes = "32x32" href = "images\free_horizontal_on_white_by_logaster.jpg">
  <link rel = "icon" type = "image/jpg" sizes = "16x16" href = "images\free_horizontal_on_white_by_logaster.jpg">
  <meta name = "msapplication-TileColor" content = "#da532c">
  <meta name = "theme-color" content = "#ffffff">
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <link rel = "stylesheet" href = "resolve.css">
  <title>Resolve - Real Women, Real Feedback</title>
</head>

<body>
  <header>
    <div class = "container">
      <div id = "branding">
        <a href = "indexresolve.html"><img src = "images/lasttry.png" alt = "resolvelogo"></a>
      </div>
      <nav>
        <li><a href = "indexresolve.html">Home</a></li>
        < <li><a href = "howitworks.html">How It Works</a></li>
          <li><a href = "contact.html">Contact</a></li>
          <li><a href = "faq.html">FAQ</a></li>
          <li><button id = "login" class = "button">Log In</button></li>
          <div id = "login-modal">
            <div id = "login-content">
              <span class = "close">&times;</span>
              <img id = "login-logo" src = "images\free_horizontal_on_white_by_logaster.jpg">
              <form>
                <input class = "login-input" type = "text" placeholder = "username">
                <input class = "login-input" type = "password" placeholder = "password">
                <button>Log In</button>
              </form>
              <p>By clicking log in, you agree to our <a href = "terms.html">Terms</a>, <a href = "privacy.html">Privacy Policy</a>, and our <a href = "cookie.html">Cookie Policy</a>.</p>
            </div>
          </div>
      </nav>
  </header>
  <section>
    <div class = "container2">
      <div>
        <h1>Guys</h1>
        <h2>fajfsda klfsdajfodisjflkd oisdjfklewjf oisdjfsakfj akfjfslkdja;fj sd;akfjdkfjsdakfj saifjsdakfs.</h2>
        <button>Get Started</button>
      </div>
      <div>
        <h1>Ladies</h1>
        <h2>dklasdjfs kdsjdlk jfsalkjf las;fjdaa fdaksjdk skjfsidjf akldfjskl fjsdlkfjskdlfjsdifjdkf dkfjsdijf s </h2>
        <button id = "login">Get Started</button>
      </div>
      <div class = "appad">
        <h2>App Coming Soon!</h2>
      </div>
    </div>
    <script src = "resolve.js"></script>
</body>

</html>

22.02.2019 02:57

Ответ принят как подходящий

Просто добавьте align-items: center; к #login-content

#login-content {
  height: 80%;
  width: 25%;
  position: relative;
  background-color: white;
  border-radius: 2%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

22.02.2019 03:01

Просто добавьте align-items: center, который будет центрировать гибкие элементы (ваш flex-direction — это column)

* {
  margin: 0;
  padding: 0;
}

html,
body {
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
}

body {
  min-height: 100%;
  min-width: 100%;
  background: url("images/newnewgirls.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

.container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.container2 {
  width: 80%;
  margin: auto;
  text-align: center;
}

header {
  padding: 1em;
  margin: 0;
}

header #branding {
  float: left;
}

header #branding img {
  width: 55%;
}

header nav {
  float: right;
  margin-top: 0.5em;
}

header nav li {
  display: inline;
  padding: 1em;
}

header nav li a {
  text-decoration: none;
}

#login-modal {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#login-content {
  height: 80%;
  width: 25%;
  position: relative;
  background-color: white;
  border-radius: 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center
}

.close {
  position: absolute;
  top: 0;
  right: 5%;
  cursor: pointer;
  font-size: 30px;
}

.login-input {
  display: block;
  margin: 0 auto 1.5rem auto;
}

#login-logo {
  height: 3rem;
  width: 3rem;
}

<!DOCTYPE HTML>
<html>

<head>
  <link rel = "apple-touch-icon" sizes = "180x180" href = "images\free_horizontal_on_white_by_logaster.jpg">
  <link rel = "icon" type = "image/jpg" sizes = "32x32" href = "images\free_horizontal_on_white_by_logaster.jpg">
  <link rel = "icon" type = "image/jpg" sizes = "16x16" href = "images\free_horizontal_on_white_by_logaster.jpg">
  <meta name = "msapplication-TileColor" content = "#da532c">
  <meta name = "theme-color" content = "#ffffff">
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <link rel = "stylesheet" href = "resolve.css">
  <title>Resolve - Real Women, Real Feedback</title>
</head>

<body>
  <header>
    <div class = "container">
      <div id = "branding">
        <a href = "indexresolve.html"><img src = "images/lasttry.png" alt = "resolvelogo"></a>
      </div>
      <nav>
        <li><a href = "indexresolve.html">Home</a></li>
        < <li><a href = "howitworks.html">How It Works</a></li>
          <li><a href = "contact.html">Contact</a></li>
          <li><a href = "faq.html">FAQ</a></li>
          <li><button id = "login" class = "button">Log In</button></li>
          <div id = "login-modal">
            <div id = "login-content">
              <span class = "close">&times;</span>
              <img id = "login-logo" src = "images\free_horizontal_on_white_by_logaster.jpg">
              <form>
                <input class = "login-input" type = "text" placeholder = "username">
                <input class = "login-input" type = "password" placeholder = "password">
                <button>Log In</button>
              </form>
              <p>By clicking log in, you agree to our <a href = "terms.html">Terms</a>, <a href = "privacy.html">Privacy Policy</a>, and our <a href = "cookie.html">Cookie Policy</a>.</p>
            </div>
          </div>
      </nav>
  </header>
  <section>
    <div class = "container2">
      <div>
        <h1>Guys</h1>
        <h2>fajfsda klfsdajfodisjflkd oisdjfklewjf oisdjfsakfj akfjfslkdja;fj sd;akfjdkfjsdakfj saifjsdakfs.</h2>
        <button>Get Started</button>
      </div>
      <div>
        <h1>Ladies</h1>
        <h2>dklasdjfs kdsjdlk jfsalkjf las;fjdaa fdaksjdk skjfsidjf akldfjskl fjsdlkfjskdlfjsdifjdkf dkfjsdijf s </h2>
        <button id = "login">Get Started</button>
      </div>
      <div class = "appad">
        <h2>App Coming Soon!</h2>
      </div>
    </div>
    <script src = "resolve.js"></script>
</body>

</html>

Это работает, но почему другие элементы уже центрированы по горизонтали? Разве мое выравнивание текста: центр не сработало бы и для изображения? Я считаю, что это сработало для кнопки.

— 22.02.2019 03:15

22.02.2019 03:06