Es gibt ein Menü mit mehreren Elementen. Jeder Gegenstand hatte einen einzeiligen Inhalt, der auf den Mittelpunkt ausgerichtet war. Aber plötzlich wurde ein Artikel mit zweizeiligem Inhalt hinzugefügt.Richten Sie das Element mit mehrzeiligem Text an der Mitte des Elternblocks aus, indem Sie die linke Textausrichtung beibehalten
Nach Design plant in diesem zweizeiligen Artikel-Inhalt-Element sollte noch in der Mitte des übergeordneten Elements ausgerichtet werden, aber Text in diesem Artikel-Inhalt-Elemente sollte bündig gelassen werden: how-it-should-look
Auch Die Elemente reagieren und der Inhalt von Elementen kann sich für diese und andere Objekte ändern. Daher ist es einfach unangemessen, eine feste Breite für den Inhalt eines Elements zu verwenden.
Beginnend mit this code:
<!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>
wir haben this solution gefunden. Aber es funktioniert nicht in IE11. Übrigens wäre ich dankbar, wenn Sie mir erklären, wie es funktioniert.
Die Frage lautet: "Gibt es eine Cross-Browser (IE11, Chrome, FF, Safari) Lösung implementieren diese ohne JS?"
EDIT: ich danke Ihnen allen für Ihre Antworten, aber wir können nicht Satz mit fester Breite aus zwei Gründen (sorry Jungen, das ist meine Schuld, dass ich das nicht in der Frage enthalten war zunächst):
- Dies genug nicht universell ist (weil Artikel Inhalt Text ändern kann)
- Itemsize sind reaktionsfähig, so dass die feste Inhaltsbreite bei einem gut aussieht Bildschirmbreite, aber schlecht bei einer anderen Bildschirmbreite.