Odpowiedzi:
Użyj line-height:50px;
zamiast wysokości. To powinno załatwić sprawę;)
Pamiętaj, że line-height
podejście to zawodzi, jeśli masz długie zdanie, span
które przerywa linię, ponieważ nie ma wystarczająco dużo miejsca. W takim przypadku byłyby dwa wiersze z przerwą o wysokości N pikseli określonej we właściwości.
Utknąłem w tym, gdy chciałem wyświetlić obraz z tekstem wyśrodkowanym w pionie po prawej stronie, który działa w responsywnej aplikacji internetowej. Jako podstawę opieram się na podejściu zaproponowanym przez Erica Nickusa i Felipe Tadeo.
Jeśli chcesz osiągnąć:
i to:
.container {
background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat;
display: inline-block;
background-size: 40px 40px; /* image's size */
height: 40px; /* image's height */
padding-left: 50px; /* image's width plus 10 px (margin between text and image) */
}
.container span {
height: 40px; /* image's height */
display: table-cell;
vertical-align: middle;
}
<span class="container">
<span>This is a centered sentence next to an image</span>
</span>
To najprostszy sposób, jeśli potrzebujesz wielu linii. Zawiń swój span
tekst w inny span
i określ jego wysokość za pomocą line-height
. Sposobem na wielu liniach resetuje wewnętrzne span
S” line-height
.
<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>
.textvalignmiddle {
line-height: /*set height*/;
}
.textvalignmiddle > span {
display: inline-block;
vertical-align: middle;
line-height: 1em; /*set line height back to normal*/
}
Oczywiście na zewnątrz span
może być div
lub cokolwiek
span
s, jak każdy inny element wbudowany, może zawierać dowolny element wbudowany HTML . Niezależnie od tego napisałem, że textvalignmiddle
może to być, div
jeśli jest to konieczne (i możesz to ustawić, display:inline;
jeśli masz taką niechęć do używania spans
)
span
jest ogólnym kontenerem wbudowanym dla html i nie zawiera jedynie wskazówki, że jest tylko tekstem; `Może służyć do grupowania elementów do celów stylizacji ... ''. Proponuję przeczytać specyfikację, zanim narzucisz innym swoje osobiste standardy kodowania, podając je jako fakty
Sposób Flexbox:
.foo {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
.foo
to rozpiętość display: flex-inline
pasowałaby lepiej
Potrzebowałem tego dla linków, więc zawinąłem span tagiem a i div, a następnie wyśrodkowałem sam tag span
HTML
<div>
<a class="tester" href="#">
<span>Home</span>
</a>
</div>
CSS
.tester{
display: inline-block;
width: 9em;
height: 3em;
text-align: center;
}
.tester>span{
position: relative;
top: 25%;
}
Pionowy obraz i tekst CSS na środku
Mam Stwórz jedno demo dla pionowego centrum obrazu i tekstu, mam również test na Firefox, Chrome, Safari, Internet Explorer 9 i 8.
Jest to bardzo krótki i łatwy w obsłudze css i html. Proszę sprawdzić poniższy kod i znaleźć wyjście na screenhort.
HTML
<div class="frame">
<img src="capabilities_icon1.png" alt="" />
</div>
CSS
.frame {
height: 160px;
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame::before {
display: inline-block;
height: 100%;
vertical-align: middle;
content:"";
}
img {
background: #3A6F9A;
vertical-align: middle;
}
Wyjście wprowadź opis obrazu tutaj
Atrybut CSS wyrównywania w pionie nie działa niestety zgodnie z oczekiwaniami. W tym artykule wyjaśniono 2 sposoby wyrównania elementu w pionie za pomocą CSS.
Ustaw padding-top, aby był odpowiednią wartością, aby przesunąć x w dół, a następnie odejmij wartość, którą masz dla padding-top od wysokości.