Как я могу выровнять текст под изображением (и все вместе в середине) - PullRequest
Новая
       0

Как я могу выровнять текст под изображением (и все вместе в середине)

1 голос
/ 11 апреля 2020

У меня 4 изображения и 4 текста. То, что я хочу сделать, это использовать эти свойства (я надеюсь, вы понимаете, что я хочу, из кода)

Чтобы выровнять мои 4 текста под 4 изображениями (текст должен быть центрирован в середине изображения) И все элементы вместе я имею в виду изображения + тексты для выравнивания в середине моей страницы.

Фотография с беспорядком на моей странице:

photo with mess of my page

Вот код HTML: 

.galerie{
  text-align: center;
  position: relative;
}
<section class="priceing_part">
  <div class="container">
    <div class="galerie">
      <a class="venobox">
        <img src="https://picsum.photos/200/300" class="tutoriale">
        <span class="caption">In acest tutorial vei invata cum sa te inscrii si sa postezi in diferite grupuri</span>
      </a>
      <a class="venobox">
        <img src="https://picsum.photos/200/300" class="tutoriale"/>
        <span class="caption">In acest tutorial vei invata cum sa te inregistrezi pe Farmasi si cum iti gasesti link-ul tau(formularul).</span>
      </a>
      <a class="venobox">
        <img src="https://picsum.photos/200/300" class="tutoriale"/>
        <span class="caption">In acest tutorial vei invata cum sa postezi reclame pe profilul tau.</span>
      </a> 
      <a class="venobox">
        <img src="https://picsum.photos/200/300" class="tutoriale">
        <span class="caption">In acest tutorial vei invata cum sa te inscrii si sa postezi in diferite grupuri</span>
      </a> 
    </div>
  </div>
</section>

Ответы [ 3 ]

1 голос
/ 11 апреля 2020

Я очищаю ваш код (решение по 4-5 CSS строкам кода).

<a> тег - это inline элемент по умолчанию - так что измените a для отображения блок (или встроенный блок) 

a.venobox{
  display: block;
  text-align: center;
}

caption также является встроенным элементом - изменить отображение block - выполнено: 

.caption{
  display: block;
}

Готово :) enter image description here

Вы не должны использовать flexbox для такой простой идеи (или любой другой сложной идеи). 

/* less is more */
a.venobox{
  display: block;
  text-align: center;
}

.caption{
  display: block;
}
<section class="priceing_part">
  <div class="container">
    <div class="galerie">
      <a class="venobox">
        <img src="https://picsum.photos/199/200" class="tutoriale">
        <span class="caption">In acest tutorial vei invata cum sa te inscrii si sa postezi in diferite grupuri</span>
      </a>
      <a class="venobox">
        <img src="https://picsum.photos/200/200" class="tutoriale"/>
        <span class="caption">In acest tutorial vei invata cum sa te inregistrezi pe Farmasi si cum iti gasesti link-ul tau(formularul).</span>
      </a>
      <a class="venobox">
        <img src="https://picsum.photos/201/200" class="tutoriale"/>
        <span class="caption">In acest tutorial vei invata cum sa postezi reclame pe profilul tau.</span>
      </a> 
      <a class="venobox">
        <img src="https://picsum.photos/203/200" class="tutoriale">
        <span class="caption">In acest tutorial vei invata cum sa te inscrii si sa postezi in diferite grupuri</span>
      </a> 
    </div>
  </div>
</section>

Макет Использование flexbox -или- CSS сетка для оболочки карты (это не вопрос вашего Q). Похожие: https://css-tricks.com/dont-overthink-flexbox-grids/

Basi c фрагмент: 

*{
  padding: 0px;
  margin:0px;
  box-sizing: border-box;
}

a.venobox{
  display: inline-block;
  text-align: center;
  border: 1px solid red;
}

.caption{
  display: block;
}

.galerie{
  display: flex;
}

.venobox{
  flex-basis: 50%;
}

img{
  width: 100%;
  height: auto;
 }
<div class="galerie">
  <a class="venobox">
    <img src="https://picsum.photos/400/200" class="tutoriale">
    <span class="caption">In acest tutorial vei invata cum sa te inscrii si sa postezi in diferite grupuri</span>
  </a>
  <a class="venobox">
    <img src="https://picsum.photos/399/200" class="tutoriale"/>
    <span class="caption">In acest tutorial vei invata cum sa te inregistrezi pe Farmasi si cum iti gasesti link-ul tau(formularul).</span>
  </a>
</div>
1 голос
/ 11 апреля 2020

Этого легко добиться, используя гибкую коробку, как у меня в моем примере

enter image description here

код, который я добавил 

.galerie{
text-align: center;
position: relative;

width: 80vw;
margin: auto;

border: 2px solid red;
display: flex;
flex-direction: column;
}

.galerie a {
  display: flex;
  flex-direction: column;
}

.galerie a img {
max-width: 100%;
}

полный код 

video {
width: 150px;
height: 150px;
border: solid 4px #cb3131;
background-color: #c9c9c9;
box-shadow: 0 5px 5px 0px rgba(0,0,0,.5);
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin-left: 20px;
margin-bottom: 20px;
display: inline-block;
}
.galerie{
text-align: center;
position: relative;

width: 80vw;
margin: auto;

border: 2px solid red;
display: flex;
flex-direction: column;
}

.galerie a {
  display: flex;
  flex-direction: column;
}

.galerie a img {
max-width: 100%;
}

@media only screen and (max-width: 600px) {
video {
width: 80px;
height: 80px;
border: solid 4px cb3131;
background-color: #c9c9c9;
box-shadow: 0 5px 5px 0px rgba(0,0,0,.5);
margin-left: 20px;
margin-bottom: 20px;
display: inline-block;
}
.galerie{
text-align: center;

}

}
<section class="priceing_part">
  <div class="container">
    <div class="galerie">
        <a class="venobox" data-autoplay="true" data-vbtype="iframe" href="resurse/tutoriale/video/grupuri.mp4">
          <img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="tutoriale">
          <span class="caption">In acest tutorial vei invata cum sa te inscrii si sa postezi in diferite grupuri</span>
        </a>

        <a class="venobox" data-autoplay="true" data-vbtype="iframe" href="resurse/tutoriale/video/formular-inscriere.mp4">
          <img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="tutoriale"/>
          <span class="caption">In acest tutorial vei invata cum sa te inregistrezi pe Farmasi si cum iti gasesti link-ul tau(formularul).</span>
        </a>

        <a class="venobox" data-autoplay="true" data-vbtype="iframe" href="resurse/tutoriale/video/postatprofil.mp4">
          <img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="tutoriale"/>
          <span class="caption">In acest tutorial vei invata cum sa postezi reclame pe profilul tau.</span>
        </a>

        <a class="venobox" data-autoplay="true" data-vbtype="iframe" href="resurse/tutoriale/video/deschideregrupuri.mp4">
          <img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="tutoriale"/>
          <span class="caption">In acest tutorial vei invata cum sa deschizi mai multe grupuri in acelasi timp.</span>
        </a>

    </div>
  </div>
</section>

Границы можно убрать, они просто для наглядности

0 голосов
/ 11 апреля 2020

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

Я хочу что-то вроде этого: 

[image1]    [image2]     [image3]
[text1]      [text2]      [text3]

Что я действительно хочу, так это: * изображение 1 с текстом 1 - изображение 2 с текстом tex2 - изображение 3 с текстом 3 * изображение 1 + текст 1 слева, изображение 2 + текст2 посередине - изображение 3 с текстом 3 справа (и, может быть, более images + text)

* Все изображения и тексты должны располагаться в центре страницы.

Раньше я мог это сделать. все 3 элемента располагались рядом на странице, но текст с изображением не был отцентрирован.

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

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

...