为什么 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" 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>

【问题讨论】：

  • 为您的#login-logo 课程尝试margin:0 auto。

标签： html css flexbox alignment


【解决方案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" 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 中才能使 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" 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>

    【讨论】：

      【解决方案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" 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>

        【讨论】：

        • 这行得通，但是为什么其他项目已经水平居中了？我的 text-align:center 不是也适用于图像吗？它适用于我相信的按钮。
        猜你喜欢
        • 1970-01-01
        • 2014-03-17
        • 1970-01-01
        • 2011-12-22
        • 2019-08-14
        • 2015-04-26
        • 2013-11-09
        • 1970-01-01
        • 2020-07-15
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode