Birden çok öğeye sahip bir menü var. Her öğenin bir satırında, içeriğiyle hizalanmış bir satır içeriği vardı. Ama aniden iki satırlı içerikli bir öğe eklendi. how-it-should-lookÖğeyi çok satırlı metinle sol metin hizalamasını koruyan ana bloğun ortasına hizalayın
Ayrıca: tasarımına göre
bu iki satır öğesi-içerikleri-eleman hala ana öğenin merkeze aynı hizada olmalıdır, ancak bu madde-içerikleri-elemanda metin sola hizalanmış olmalıdır planları Öğeler yanıt verir ve bu ve diğer öğeler için öğe içerikleri değişebilir - bu nedenle yalnızca öğe içeriği için sabit genişlik kullanılması uygun değildir.
this code ile başlayan:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Align element wit multiline text to the center of parent block preserving left text-alignment</title>
<style>
.list-item {
border: 1px solid #999;
padding: 10px;
text-align: center;
width: 350px;
}
.item-contents {
border: 1px dashed #999;
display: inline-block;
text-align: left;
font-size: 30px;
}
</style>
</head>
<body>
<div class="list-item">
<div class="item-contents">We've got a verylongwordhere</div>
</div>
</body>
</html>
biz this solution bulduk. Ancak IE11'de çalışmıyor. Bu arada, bana nasıl çalıştığını açıklarsanız minnettar olurum.
soru şudur:
DÜZENLEME "herhangi çapraz tarayıcı (IE11, Chrome, FF, Safari) çözümü JS olmadan bu uygulamaya var mı?": Cevaplar için teşekkür ediyorum, ama yapamayız Bu yeterince evrensel değildir
- (madde içeriği metin değişebilir çünkü)
- Ürün boyutu: iki nedenden dolayı kümesi sabit genişlikli (üzgün adamlar, ben başlangıçta söz konusu bu dahil etmedi benim hatam) Yanıt verenler, bu nedenle, sabit öğe içeriği genişliğinde bir tanesi iyi görünecek ekran genişliği, ancak başka bir ekran genişliğinde kötü.