Распределите переполнение текста равномерно по обеим сторонам элемента - PullRequest
Новая
       64

Распределите переполнение текста равномерно по обеим сторонам элемента

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

У меня возникла следующая проблема: Я получил <figure>, чье <figcaption> может переполнить <figure>. Вы можете увидеть это на скрипке ниже: 

body{
  display:flex;
  justify-content:center;
  align-items:center;
}
figure{
  width:300px;
  height:500px;
}
img{
  width:100%;
}
figcaption{
  position:relative;
  top:-50px;
  display:inline-block;
  font-size:3em;
  white-space:nowrap;
  text-align:center;
  font-weight:bold;
  width:100%;
}
<figure>
<img src="https://www.zooroyal.de/magazin/wp-content/uploads/2017/03/Golden-Retriever-760x560.jpg">
<figcaption>Golden Retriever</figcaption>
</figure>

Чего я хочу добиться, так это того, чтобы текст по-прежнему центрировался внутри <figure>, независимо от того, шире ли текст, чем фигура, или нет.

Я не могу придумать возможного решения. Кто-нибудь знает способ достичь этого? Без использования JavaScript, пожалуйста.

Ответы [ 3 ]

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

Еще один способ добиться этого: 

body{
  display:flex;
  justify-content:center;
  align-items:center;
}
figure{
  text-align:center;
}
img{
  width:300px;

}
figcaption{
  position:relative;
  top:-50px;
  display:inline-block;
  font-size:3em;
  white-space:nowrap;
  text-align:center;
  font-weight:bold;
  width:100%;
}

<figure>
<img src="https://www.zooroyal.de/magazin/wp-content/uploads/2017/03/Golden-Retriever-760x560.jpg">
<figcaption>Golden Retriever</figcaption>
</figure>
0 голосов
/ 29 июня 2018

Это может быть то, что вы хотите .. 

body{
  display:flex;
  justify-content:center;
  align-items:center;
}
figure{
  width:300px;
  height:500px;
}
img{
  width:100%;
}
figcaption{
  position:relative;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    font-size:2em;
    white-space:nowrap;
    text-align:center;
    font-weight:bold;
}
<figure>
<img src="https://www.zooroyal.de/magazin/wp-content/uploads/2017/03/Golden-Retriever-760x560.jpg">
<figcaption>Golden Retriever</figcaption>
</figure>
0 голосов
/ 29 июня 2018

Используйте эти стили: 

    figcaption {
        position:relative;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }

Надеюсь, это то, чего вы хотите достичь.

...