Как выровнять элементы по левому краю друг с другом в сетке, в которой использовались элементы выравнивания по центру

ProgramBox

Как выровнять элементы по левому краю друг с другом в сетке, в которой использовались элементы выравнивания по центру

Post author:admin
Запись опубликована:15 марта, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я использую grid . Я центрировал свое items , но я хочу, чтобы положение слева было одинаковым cross axis .

 .box {
  display: grid;
  grid-template-columns: 1fr;
  padding: 10px;
  border: 1px solid blue;
  gap: 1rem;
  justify-items: center;
}

img {
  width: 200px;
}

 <div class="box">
  <img src="img/featured.jpg">
  <div class="item2">Item 2 Lorem</div>
</div>

Примечание: я хочу, чтобы решение было только в сетке. Для этого есть много временных исправлений, но я этого не хочу, потому что я ищу для этого идеальное стандартное решение для выравнивания сетки.

Ответ №1:

Вы можете сделать это несколькими способами:

1. Текст фиксированной ширины (не реагирует)
На основе информации, которую вы указали в своем вопросе. вы можете просто установить ширину item2 div такой же, как у изображения, например:

Показать фрагмент кода

 .box {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px;
    border: 1px solid blue;
    gap: 1rem;
    justify-items: center;
}
.item2,
img {
    width: 200px;
}

 <div class="box">
    <img src="https://via.placeholder.com/200x150">
    <div class="item2">Item 2 Lorem</div>
</div>

2. Адаптивный способ

Это позволит нам быстро настроить 2 отдельных выравнивания, которые вам требуются: центрировать элемент контейнера и выравнивать его содержимое по левому краю, например

 <div class="box">
  <div class="boxcontent">
     Content here...
  </div>
</div>

CSS: .boxcontent { text-align: left; }

Почему это работает:

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

Если вы подумаете об этом, вы пытаетесь выполнить здесь 2 отдельных выравнивания:

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

Помещение их в контейнер позволяет достичь обеих этих целей, создавая связь между изображением и текстом, чтобы:

они действуют как единое целое по отношению к сетке, а также
разрешить их расположение относительно друг друга независимо от сетки

Рабочий пример:

 .box {
  display: grid;
  grid-template-columns: 1fr;
  padding: 10px;
  border: 1px solid blue;
  gap: 1rem;
  justify-items: center;
}

.boxcontent {
  text-align: left;
}

img {
  width: 200px;
}

 <div class="box">
  <div class="boxcontent">
    <img src="https://via.placeholder.com/200x150">
    <div class="item2">Item 2 Lorem</div>
  </div>
</div>

1. У меня в голове были эти 2 идеи… но это временное исправление .. я не хотел никакого временного исправления .. было бы хорошо, если вы можете предоставить любое стандартное решение grid для этого … если для этого нет никакого стандартного решения, мне придется пойти по вашему пути

2. @Любопытно, если у вас есть особые требования, вам необходимо включить их в свой вопрос! Мы можем ответить только на то, что нас спрашивают 🙂 Но вариант 2 является стандартным способом — если вы подумаете об этом, вы пытаетесь сделать здесь 2 отдельные вещи: (1) связать изображение и текст, чтобы они были выровнены друг с другом, и (2) выровнять их по-разному по отношению друг к другу, чем к сетке(т.е. выровнены по левому краю друг с другом, выровнены по центру в сетке. Помещение их в контейнер создает взаимосвязь, поэтому сетка знает, как центрировать их вместе, а также выравнивать их друг относительно друга.

3. Я думаю, мне придется вставить другой div, как вы предлагаете….

4. @Curiously Да, как я уже сказал, это стандартный способ сделать это — я обновил свой ответ, чтобы объяснить немного больше. У вас должна быть определенная связь между изображением и текстом, иначе невозможно сообщить браузеру, что эти 2 отдельных элемента должны быть расположены относительно друг друга.

Ответ №2:

 .box {
    display: block;
    margin: 0 auto;
    width: max-content;
    padding: 10px;
    border: 1px solid blue;
}

img {
    width: 200px;
} 

.item2 {
    margin-top: 1rem;
}

 <div class="box">
    <img src="pic_trulli.jpg" alt="Hi dear">
    <div class="item2">Item 2 Lorem</div>
</div>

1. Нет его динамического содержимого. ширина может меняться в зависимости от содержимого.

2. Итак, изображение динамическое или текст динамический? Из-за предоставленного стиля ширина изображения установлена на 200px (статическое значение.)

3. Можете ли вы дать мне более подробную информацию об этом?

4. текст является динамическим

5. Это не отвечает на вопрос, который заключался в том, как это сделать с помощью grid отображения