为啥 flexbox 不像 div 中的其他元素那样居中我的图像？

Posted 2023-03-05

技术标签:

【中文标题】为啥 flexbox 不像 div 中的其他元素那样居中我的图像？【英文标题】：Why won't flexbox center my image like the other elements within the div?为什么 flexbox 不像 div 中的其他元素那样居中我的图像？ 【发布时间】：2019-07-16 01:33:43 【问题描述】：

我正在尝试使用 flexbox 将 #login-logo 居中在 #login-content div 中，但图像是唯一没有居中的东西。我以为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" ></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>

【问题讨论】：

为您的#login-logo 课程尝试margin:0 auto。 【参考方案1】：

您可以通过添加边距属性使徽标居中：

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

【讨论】：

【参考方案2】：

您需要将图像包装在一个 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" ></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 中才能使 flexbox 工作，而不是其他元素呢？【参考方案3】：

在列 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" ></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>

【讨论】：

【参考方案4】：

只需将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;

【讨论】：

【参考方案5】：

只需添加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" ></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>

【讨论】：

这行得通，但是为什么其他项目已经水平居中了？我的 text-align:center 不是也适用于图像吗？它适用于我相信的按钮。

以上是关于为啥 flexbox 不像 div 中的其他元素那样居中我的图像？的主要内容，如果未能解决你的问题，请参考以下文章

滚动到 flexbox 容器中的元素

为啥 div 的测量宽度与浏览器测量不同？

flexbox 表，所有 div 对齐但一个，边框不匹配，不知道为啥

当其他元素居中对齐时，使用 Flexbox 将页脚与页面底部对齐

一个div包含两个position:absolute的div。可是，外面的div为啥不能包住那两个div呢

如何在 Flexbox 中的两个 div 之间添加边距/空格 [重复]