Question

我正在尝试将页面中许多div内的所有元素垂直居中。我添加了所需的代码，但奇怪的是只有第一个div受到影响，尽管所有div的样式都相同。

我觉得这很令人困惑。我注意到只有当浏览器窗口处于全宽时才会出现问题。然后通过一些试验，我发现auto中的col-xl-auto是原因，因为当我删除它时，问题就消失了。

您认为这是什么原因？

这是一个模拟问题的代码：

＆＃13;

#s2 {
  background-color: #C4E077;
}

#s3 {
  background-color: #B0CFE6;
}

.section {
  height: 30em;
  text-align: center;
  padding: 6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-justify {
  text-align: justify;
}

.text-right {
  text-align: right;
}

.sh {
  font-family: "Changa", "El Messiri";
  line-height: 1.7em;
  font-size: 1.3em;
  font-weight: bold;
  word-spacing: 0.3em;
  margin-bottom: 0.8em;
}

.sp {
  font-family: Scheherazade;
  font-size: 1.1em;
}

.mmm {
  margin: 0.7em 1.5em;
}

.image {
  width: 20em;
  text-align: center;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Amiri|Aref+Ruqaa|Cairo|Changa|El+Messiri|Jomhuria|Katibeh|Lalezar|Lateef|Mirza|Rakkas|Scheherazade" rel="stylesheet">
<div class="container-fluid section" id="s2">
  <div class="row justify-content-xl-center align-items-center justify-content-end">
    <div class="col-xl-auto text-right mmm">
      <div class="image"><img class="img-fluid" src="https://s-media-cache-ak0.pinimg.com/originals/aa/e1/b3/aae1b3459e6f56fbb26a64550efc992b.png"></div>
    </div>
    <div class="col-xl-3 mmm" dir=auto>
      <h4 class="text-right sh">
        موقعك سيظهر بشكل مناسب على كل أنواع الأجهزة</h4>
      <p class="text-justify sp">موقعك سيظهر بشكل مناسب على كل أنواع الأجهزة, موقعك سيظهر بشكل مناسب على كل أنواع الأجهزة. موقعك سيظهر بشكل مناسب على كل أنواع الأجهزة,موقعك سيظهر بشكل مناسب على كل أنواع الأجهزة</p>
    </div>
  </div>
</div>

<div class="container-fluid section" id="s3">
  <div class="row justify-content-xl-center align-items-center justify-content-end">
    <div class="col-xl-auto text-right mmm">
      <div class="image"><img class="img-fluid" src="https://s-media-cache-ak0.pinimg.com/originals/aa/e1/b3/aae1b3459e6f56fbb26a64550efc992b.png"></div>
    </div>
    <div class="col-xl-3 mmm" dir=auto>
      <h4 class="text-right sh">
        نستخدم تقنيات لجعل موقعك أسرع تحميلاً</h4>
      <p class="text-justify sp">
        نستخدم تقنيات لجعل موقعك أسرع تحميلاً نستخدم تقنيات لجعل موقعك أسرع تحميلاًنستخدم تقنيات لجعل موقعك أسرع تحميلاًنستخدم تقنيات لجعل موقعك أسرع تحميلاً نستخدم تقنيات لجعل موقعك أسرع تحميلاً نستخدم تقنيات لجعل موقعك أسرع تحميلاً
      </p>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

＆＃13;

关于垂直对齐项目的CSS行为非常奇怪

0 个答案: