Текст не находится в центре столбца при использовании кода со скрытыми элементами

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я пытаюсь скрыть текст абзаца и кнопку, когда на экране меньше lg, но текст абзаца не центрируется, когда на экране lg или больше.

Скриншот проблемы: https://ibb.co/RhTt98k Полный код: https://codepen.io/jl-joey/pen/KKMEPGE

 p {
  font-family: montserrat, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  display: inline-block;
  word-wrap: break-word;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row slim">
  <div class="col-lg-6 slim-content text-center">
    <h1>Rouge Pur Couture</h1>
    <p class="d-none d-lg-block">Achieve a perfect shaped lips with YSL Rouge Pur Couture The Slim. This square matte lipstick has a long-lasting feature that will stay put all day long.</p>

    <form class="d-none d-lg-block">
      <input class="redbtn" type="image" src="../image/wild/shopbtn-02.png" alt="imagebtn" />
    </form>

  </div>
  <div class="col-lg-6 product slim-img text-center px-5">
    <img class="img-fluid" src="../image/bestseller/slim.jpg" alt="" /> </div>
</div>

1. Приведенный вами пример кода работает для меня (скрыт на меньшем, чем большая точка останова, по центру на большом и большем). Можете ли вы привести живой пример, который показывает поведение, которое вы видите?

2. Я размещаю ссылку на скриншот веб-страницы. ibb.co/RhTt98k

3. Можете ли вы опубликовать полный исходный код в codepen.io пожалуйста

4. codepen.io/jl-joey/pen/KKMEPGE Извините, но я не уверен, в чем проблема, из-за того, что codepen не отображался так, как он должен отображаться на веб-странице.

Ответ №1:

Как сказал @freefall, я тоже вижу, что ваш код тоже работает, но, возможно, попробуйте добавить эти вещи, чтобы покрыть некоторые основы. Добавьте text-center в абзац, в котором возникла проблема. вот так:

<p class="d-none d-lg-block text-center">Achieve a perfect shaped lips with YSL Rouge Pur Couture The Slim. This square matte lipstick has a long-lasting feature that will stay put all day long.</p>

И, возможно, добавьте его в свой CSS text-align: center;

Итак, для рабочего примера, может быть, это:

 p {
  font-family: montserrat, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  display: inline-block;
  word-wrap: break-word;
  text-align: center;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row slim">
  <div class="col-lg-6 slim-content text-center">
    <h1>Rouge Pur Couture</h1>
    <p class="d-none d-lg-block text-center">Achieve a perfect shaped lips with YSL Rouge Pur Couture The Slim. This square matte lipstick has a long-lasting feature that will stay put all day long.</p>

    <form class="d-none d-lg-block">
      <input class="redbtn" type="image" src="https://external-content.duckduckgo.com/iu/?u=http://dompict.com/wp-content/uploads/2017/07/27-Cats-Pictures-3.jpgamp;f=1amp;nofb=1" alt="imagebtn" />
    </form>

  </div>
  <div class="col-lg-6 product slim-img text-center px-5">
    <img class="img-fluid" src="https://www.sickchirpse.com/wp-content/uploads/2012/11/Cats.jpg" alt="" /> </div>
</div>

1. Я хочу, чтобы текст был в центре, но выровнен по левому краю. Пробовал добавлять text-center и text-align:center. Текст выровнен по центру, но все еще не в центре столбца.

2. Я не уверен, что понимаю, можете ли вы быстро нарисовать что-нибудь, что показывает, что вы хотите? Кроме того, этот сайт работает и вы можете поделиться с ним URL-адресом?

3. ibb.co/QCS8hd3 к сожалению, это не живой сайт. Но у меня есть полный код здесь: codepen.io/jl-joey/pen/KKMEPGE

4. Попробуйте просто добавить text-align:center; body в CSS, чтобы посмотреть, делает ли это то, что вы ищете. и если это слишком много, попробуйте добавить его в .shine

5. Все еще не работает, в настоящее время мне приходится вручную корректировать их, добавляя поля слева.