Почему изображение и тег h3 не отображаются в порядке на экранах разных размеров? - PullRequest
Новая
       0

Почему изображение и тег h3 не отображаются в порядке на экранах разных размеров?

0 голосов
/ 02 июня 2018

У меня есть это изображение и тег h3, которые появляются не по порядку на разных экранах, я хочу, чтобы оба были в центре, без беспорядка.

Я пытался: 

<body style="background-color:tomato; color:white; font-family:Consolas; font-weight:600">
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="col-md-12 col-sm-4 col-xs-6">
                    <img style="width: 26%; position: absolute; margin-left: 36%; margin-top: -14%;"  class="img-responsive" src="~/Content/images/404.png" />
                    <h3 style="margin-left: 24%; margin-top: 39%;;">Oops, this page does not exists. Go back to @Html.ActionLink("Home", "Index", "Home")</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-12 "></div>
</body>

1 Ответ

0 голосов
/ 02 июня 2018

Я только что изменил ваш код, см. Ниже HTML 

<body style="background-color:tomato; color:white; font-family:Consolas; font-weight:600">
  <div class="container">
      <div class="row">
          <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="col-md-12 col-sm-4 col-xs-6">
                  <img style="width: 26%; margin: 14% auto 0 auto; display: block;"  class="img-responsive" 
                      src="https://www.seoclerk.com/pics/want54841-1To5V31505980185.png" />
                  <h3 style="text-align: center;">Oops, this page does not exists. Go back to @Html.ActionLink("Home", "Index", "Home")</h3>
              </div>
          </div>
      </div>
  </div>
  <div class="col-sm-12 "></div>

изменил стили тега img.чтобы взять тег img в центр набора div для левого и правого полей автоматически и сделать отображение тега img в блоке .также при использовании поля left и right auto для центрирования элемента вы должны будете установить ширину элемента.

в теге h3 все, что вам нужно, это добавить text-align: center

надеюсь, это решит вашу проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...