Макет сетки, не центрирующий изображение W3libary и Bootstrap-4

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я использую bootstrap 4 и https://www.w3schools.com/w3css /

http://prntscr.com/mtft5t Изображения, которые я пробовал до сих пор, float-left float-right float-none из bootstrap также использовались w3-center из библиотеки w3schools, но они не центрируют изображение, и когда я добавляю, margin-right они игнорируют это и не меняют положение изображения или div, в котором оно было? как вы центрируете изображения в сетке?

сетка:

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid5" class="w3-row-padding w3-padding-64 w3-container">
  <div class="w3-content">
    <div>
      <h1 class="text-center" data-aos="fade-up">Next Step</h1>
      <br>
      <br>
      <br>
      <div class="container">

        <div class="row flex-row">
          <div class="col">
            <div class="w3-third w3-center">
              <div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine">
                <img src="images/snake.jpg" class="w3-hover-sepia" style="box-shadow: 3px 3px 5px black;width: 18em; height: 18em;" alt="Person">
              </div>
            </div>
          </div>
          <div class="col">
            <div class="w3-third w3-center">
              <div data-aos="fade-left" data-aos-offset="300" data-aos-easing="ease-in-sine">
                <img src="images/snake.jpg" class="w3-hover-sepia" style="box-shadow: 3px 3px 5px black;width: 18em; height: 18em;" alt="Person">
              </div>
            </div>
          </div>
        </div>

        <br>
        <div class="row flex-row">
          <div class="col">
            <div class="w3-third w3-center">
              <div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine">
                <img src="images/snake.jpg" class="w3-hover-sepia" style="box-shadow: 3px 3px 5px black;width: 18em; height: 18em;" alt="Person">
              </div>
            </div>
          </div>
          <div class="col">
            <div class="w3-third w3-center">
              <div data-aos="fade-left" data-aos-offset="300" data-aos-easing="ease-in-sine">
                <img src="images/snake.jpg" class="w3-hover-sepia" style="box-shadow: 3px 3px 5px black;width: 18em; height: 18em;" alt="Person">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1. просто замена w3-center на text-center у меня отлично сработала 😉

2. замена на w3-center на text-center я пробовал это, но изображение в div находится по центру, но разделы вокруг него сдвинуты левее, даже когда я добавил ‘text-center to <div class=»container»>’, оно все еще сдвинуто влево от страницы

Ответ №1:

вы можете добавить <center> </ center> тег перед родительским <div> тегом

 <html>
<body>
<center>
  <div>
  ...
  </div>
</center>
</body>
</html>

Ответ №2:

<div class="w3-third w3-center"> должно быть, <div class="w3-center"> это создавало сетку в сетке, поэтому она сдвинула все влево и оставила немного пустого места справа, вот почему изображения не центрированы.

Ответ №3:

Просто добавьте класс ‘text-center’ в .col div, например:
<div class='row'> <div class='col text-center'></div> </div> примечание: * Здесь text-center — это класс bootstrap.

1. Посмотрите, где именно вы хотите, чтобы он поместил «text-center» и куда я сказал ему поместить, вы сказали ему поместить text-center для прямого дочернего элемента div «.col» т.е. вместо w3-center, где, как я сказал, для размещения text-center рядом с классом «col» вам требуется минимальное базовое образование, чтобы понять разницу, брох. вы не единственный, кто знает css.