Question

我正在使用随机报价网络应用，我无法水平居中图像。通常，这是使用mx-auto获取的。我的图像位于大小为col-12的div内，div位于一行内。但是，图像仍然没有居中。如果有人能指出我错过了什么？谢谢链接http://pctechtips.org/apps/quotes/ 代码

<html><head>
  <meta charset="UTF-8">
 <title>Random Quotes Generator</title> 
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- fontawesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">

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


</head>

<body>
  <link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">  
    <h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>    
  <row> 
    <div class="col-12">
      <img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid mx-auto image">
    </div> 
  </row>

  <div class="row">
    <p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
  </div>
    <div class="col-3 center">      
      <button id="getMessage" class="btn btn-primary">Get quote!</button>
  </div> 
  <br> 
  <div class="col-8 mx-auto">
    <div id="content" class="row col-12 text"></div> 
  <div id="author" class="row col-12 text"></div> 
  </div>  
  <!-- buttons -->
<div class="container">
  <div class="row">
    <div class="col-4 text-right">
      <a class="btn btn-info btn-social">
        <i class="fas fa-chevron-left"></i>
      </a>
    </div>
    <div class="col-4 text-center">       
        <a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
        <i class="fa fa-twitter"></i>
        </a>      
    </div>
    <div class="col-4 text-left">
      <a class="btn btn-info btn-social">
        <i class="fas fa-chevron-right"></i>
      </a>
    </div>
  </div>
</div>
</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body></html>

CSS

body {
  background-color: #354048;
}

/*.test {
  border-style: solid;
}*/

.container {
  padding-top: 50px;
}

.header_text {
    /*font-family: 'Allura';*/
    font-family: 'Cinzel', serif;
    font-size: 60px;
    font-weight: bold;

}

.text-primary {
  color: #29c0ec!important;
}

.sub_text {
   font-family: 'Cinzel', serif;
   font-size: 25px;
   font-weight: bold;
}

#getMessage {
   font-size: 18px;
}

.image {
  width: 160px;
  height: 180px;
  border-radius: 300px;
  border-color: #29c0ec;
  border-width: 3px;
  border-style: solid;

}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.text {
  color: white;
  font-family: 'Verdana';
  font-size: 20px;
}

i {
  color: white;
}

.btn {
  font-size: 35px;
  border-radius: 70px;
}

Answer 1

将类d-flex align-items-center添加到包含图像的col-12 div

Answer 2

将d-block课程添加到img，使您的图片成为中心。

＆＃13;

body {
  background-color: #354048;
}

/*.test {
  border-style: solid;
}*/

.container {
  padding-top: 50px;
}

.header_text {
    /*font-family: 'Allura';*/
    font-family: 'Cinzel', serif;
    font-size: 60px;
    font-weight: bold;

}

.text-primary {
  color: #29c0ec!important;
}

.sub_text {
   font-family: 'Cinzel', serif;
   font-size: 25px;
   font-weight: bold;
}

#getMessage {
   font-size: 18px;
}

.image {
  width: 160px;
  height: 180px;
  border-radius: 300px;
  border-color: #29c0ec;
  border-width: 3px;
  border-style: solid;

}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.text {
  color: white;
  font-family: 'Verdana';
  font-size: 20px;
}

i {
  color: white;
}

.btn {
  font-size: 35px;
  border-radius: 70px;
}

＆＃13;

<html><head>
  <meta charset="UTF-8">
 <title>Random Quotes Generator</title> 
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- fontawesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">

  <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">  
    <h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>    
  <row> 
    <div class="col-12">
      <img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid mx-auto image d-block">
    </div> 
  </row>

  <div class="row">
    <p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
  </div>
    <div class="col-3 center">      
      <button id="getMessage" class="btn btn-primary">Get quote!</button>
  </div> 
  <br> 
  <div class="col-8 mx-auto">
    <div id="content" class="row col-12 text"></div> 
  <div id="author" class="row col-12 text"></div> 
  </div>  
  <!-- buttons -->
<div class="container">
  <div class="row">
    <div class="col-4 text-right">
      <a class="btn btn-info btn-social">
        <i class="fas fa-chevron-left"></i>
      </a>
    </div>
    <div class="col-4 text-center">       
        <a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
        <i class="fa fa-twitter"></i>
        </a>      
    </div>
    <div class="col-4 text-left">
      <a class="btn btn-info btn-social">
        <i class="fas fa-chevron-right"></i>
      </a>
    </div>
  </div>
</div>
</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body></html>

＆＃13;

或将text-center添加到其父级。

＆＃13;

body {
  background-color: #354048;
}

/*.test {
  border-style: solid;
}*/

.container {
  padding-top: 50px;
}

.header_text {
    /*font-family: 'Allura';*/
    font-family: 'Cinzel', serif;
    font-size: 60px;
    font-weight: bold;

}

.text-primary {
  color: #29c0ec!important;
}

.sub_text {
   font-family: 'Cinzel', serif;
   font-size: 25px;
   font-weight: bold;
}

#getMessage {
   font-size: 18px;
}

.image {
  width: 160px;
  height: 180px;
  border-radius: 300px;
  border-color: #29c0ec;
  border-width: 3px;
  border-style: solid;

}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.text {
  color: white;
  font-family: 'Verdana';
  font-size: 20px;
}

i {
  color: white;
}

.btn {
  font-size: 35px;
  border-radius: 70px;
}

＆＃13;

<html><head>
  <meta charset="UTF-8">
 <title>Random Quotes Generator</title> 
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- fontawesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">

  <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">  
    <h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>    
  <row> 
    <div class="col-12 text-center">
      <img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid image">
    </div> 
  </row>

  <div class="row">
    <p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
  </div>
    <div class="col-3 center">      
      <button id="getMessage" class="btn btn-primary">Get quote!</button>
  </div> 
  <br> 
  <div class="col-8 mx-auto">
    <div id="content" class="row col-12 text"></div> 
  <div id="author" class="row col-12 text"></div> 
  </div>  
  <!-- buttons -->
<div class="container">
  <div class="row">
    <div class="col-4 text-right">
      <a class="btn btn-info btn-social">
        <i class="fas fa-chevron-left"></i>
      </a>
    </div>
    <div class="col-4 text-center">       
        <a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
        <i class="fa fa-twitter"></i>
        </a>      
    </div>
    <div class="col-4 text-left">
      <a class="btn btn-info btn-social">
        <i class="fas fa-chevron-right"></i>
      </a>
    </div>
  </div>
</div>
</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body></html>

＆＃13;

将图像置于引导程序4中

2 个答案: