Zentrier- und Positionierelemente in der gleichen Reihe

Question

ich habe eine Frage zu Zentrier- und Positionierelementen hintereinander. Ich habe links einen Textblock und in diesem Fall nur ein Wort, das zentriert und in derselben Zeile wie die E-Mail stehen sollte.

nav { 
 
\t text-align: center; 
 
}

<address> 
 
    <a href="#">Some text</a> 
 
    <br> 
 
    hi(at)mail.com 
 
</address> 
 

 
<nav> 
 
    <a href="#">about</a> 
 
</nav>

Ich habe versucht, die Adresse nach links zu schweben, aber dann das nav ist nicht mehr in der Mitte. Irgendwelche Ideen, wie man das erreicht? Es muss einfach sein, aber ich weiß einfach nicht wie.

bearbeiten

Die nav sollten für das gesamte Ansichtsfenster, meine aktuelle Antwort auf absolute Position wäre zentriert das nav und Satz links und rechts auf 0, aber ich weiß nicht, ob dies das wäre beste Art, es zu tun.

was sollte wie folgt aussehen:

Answer 1

Ich weiß nicht, ob es der beste Weg ist, aber es sieht aus wie das, was Sie

nav { 
 
left:50%; 
 
\t text-align: center; 
 
} 
 
address{ 
 
    float:left; 
 
}

<address> 
 
    <a href="#">Some text</a> 
 
    <br> 
 
    hi(at)mail.com 
 
</address> 
 

 
<nav> 
 
<br/> 
 
    <a href="#">about</a> 
 
</nav>

Answer 2

tun wollen

Erwägen Sie die Verwendung von display:table-cell. Auf diese Weise können wir den Inhalt vertikal auf den Boden des Containerelements ausrichten.

HTML:

<div class="container"> 
    <address> 
    <a href="#">Some text</a> 
    <br> 
    hi(at)mail.com 
    </address> 
    <nav> 
    <a href="#">about</a> 
    </nav> 
</div> 

CSS: (Edited 50% Breite auf table-cell Elemente enthalten)

.container{ 
    display:table; 
    width:100%; 
} 
address, nav{ 
    display:table-cell; 
    vertical-align:bottom; 
    width:50%; 
} 

Ansicht der codepen hier: http://codepen.io/eoghanTadhg/pen/NNYgYg

Answer 3

Ich wollte Ihnen zeigen, Diese Lösung, weil sie einige Ideen kombiniert, die manchmal als problematisch angesehen werden. Hier verwende ich die Tatsache, dass Inline-Block-Elemente standardmäßig vertikal um die letzte Zeile ihres Inhalts ausgerichtet sind. Das ist genau das, was du brauchst. Außerdem wird ein sichtbarer Überlauf eines Blocks mit einer Breite von Null verwendet, um den Nav-Inhalt horizontal innerhalb des umschließenden Blocks zu zentrieren.

nav { 
 
    text-align: center; 
 
    display:inline-block; 
 
    width:100%; 
 
    margin-left:-0.25em; 
 
} 
 
address { 
 
    display:inline-block; 
 
    width:0; 
 
} 
 
address > * { 
 
    white-space: nowrap; 
 
}

<address> 
 
    <a href="#">Some text</a> 
 
    <br> 
 
    <span>hi(at)mail.com</span> 
 
</address> 
 

 
<nav> 
 
    <a href="#">about</a> 
 
</nav>