Próbuję wyśrodkować zawartość kolumny. Na mnie to nie wygląda. Oto mój kod HTML:
<div class="row">
<div class="col-xs-1 center-block">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
Próbuję wyśrodkować zawartość kolumny. Na mnie to nie wygląda. Oto mój kod HTML:
<div class="row">
<div class="col-xs-1 center-block">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
Odpowiedzi:
Posługiwać się:
<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">
zamiast
<div class="col-xs-1 center-block">
Możesz także użyć bootstrap 3 css:
<!-- recommended method -->
<div class="col-xs-1 text-center">
Bootstrap 4 ma teraz klasy flex, które będą wyśrodkowywać zawartość:
<div class="d-flex justify-content-center">
<div>some content</div>
</div>
Zauważ, że domyślnie będzie to x-axis
chyba, że flex-direction
jestcolumn
[Zaktualizowano grudzień 2020 r.]: Testowana i dołączona 5.0
wersja Bootstrap.
Wiem, że to pytanie jest stare. I w pytaniu nie wspomniano, której wersji Bootstrapa używa. Zakładam więc, że odpowiedź na to pytanie została rozwiązana.
Jeśli ktoś z Was (jak ja) natknął się na to pytanie i szukał odpowiedzi przy użyciu obecnego frameworka bootstrap 5.0 (2020) i 4.5 (2019), to oto rozwiązanie.
Użyj d-flex justify-content-center
na swoim div kolumny. Spowoduje to wyśrodkowanie wszystkiego wewnątrz tej kolumny.
<div class="row">
<div class="col-4 d-flex justify-content-center">
// Image
</div>
</div>
Jeśli chcesz wyrównać tekst wewnątrz kolumny, po prostu użyj text-center
<div class="row">
<div class="col-4 text-center">
// text only
</div>
</div>
Jeśli masz tekst i obraz w kolumnie, musisz użyć d-flex
justify-content-center
i text-center
.
<div class="row">
<div class="col-4 d-flex justify-content-center text-center">
// for image and text
</div>
</div>
Konwencje nazewnictwa Bootstrap mają własne style, col-XS-1 odnosi się do kolumny zajmującej 8,33% szerokości elementu zawierającego. Twój tekst najprawdopodobniej rozszerzyłby się daleko poza określoną szerokość i nie mógł być w nim wyśrodkowany. Jeśli chcesz, aby ograniczał się do elementu div, możesz użyć czegoś takiego jak podział słów CSS.
Istnieją dwie możliwości wyśrodkowania treści w elemencie wystarczająco dużym, aby rozszerzyć się poza tekst.
Opcja 1: tag HTML Center
<div class="row">
<div class="col-xs-1 center-block">
<center>
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</center>
</div>
</div>
Opcja 2: wyrównanie tekstu CSS
<div class="row">
<div class="col-xs-1 center-block" style="text-align:center;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
Jeśli chcesz, aby wszystko było ograniczone do szerokości kolumny
<div class="row">
<div class="col-xs-1 center-block" style="text-align:center;word-break:break-all;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
AKTUALIZACJA - Korzystanie z klasy centrum tekstu Bootstrap
<div class="row">
<div class="col-xs-1 center-block text-center">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
Metoda FlexBox
<div class="row">
<div class="flexBox" style="
display: flex;
flex-flow: row wrap;
justify-content: center;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
Nie ma potrzeby komplikować sprawy. Dzięki Bootstrap 4 możesz po prostu wyrównać elementy w poziomie w kolumnie za pomocą automatycznej klasy marginesówmy-auto
<div class="col-md-6 my-auto">
<h3>Lorem ipsum.</h3>
</div>
Bootstrap 4, poziome i pionowe wyrównanie zawartości za pomocą Flex Box
<div class="page-hero d-flex align-items-center justify-content-center">
<h1>Some text </h1>
</div>
Użyj klasy bootstrap align-items-center i justify-content-center
.page-hero {
height: 200px;
background-color: grey;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="page-hero d-flex align-items-center justify-content-center">
<h1>Some text </h1>
</div>
Użyj text-center
zamiast center-block
.
Lub użyj center-block
na elemencie rozpiętym (zrobiłem kolumnę szerszą, abyś mógł lepiej zobaczyć wyrównanie):
<div class="row">
<div class="col-xs-10" style="background-color:#123;">
<span class="center-block" style="width:100px; background-color:#ccc;">abc</span>
</div>
</div>
//add this to your css
.myClass{
margin 0 auto;
}
// add the class to the span tag( could add it to the div and not using a span
// at all
<div class="row">
<div class="col-xs-1 center-block">
<span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
col-lg-4 col-md-6 col-sm-8 col-11 mx-auto
1. col-lg-4 ≥ 1200px (popular 1366, 1600, 1920+)
2. col-md-6 ≥ 970px (popular 1024, 1200)
3. col-sm-8 ≥ 768px (popular 800, 768)
4. col-11 set default smaller devices for gutter (popular 600,480,414,375,360,312)
5. mx-auto = always block center
Jeśli żadne z powyższych nie działa (jak w moim przypadku próbując wyśrodkować dane wejściowe), użyłem przesunięcia Boostrap 4:
<div class="row">
<div class="col-6 offset-3">
<input class="form-control" id="myInput" type="text" placeholder="Search..">
</div>
</div>
span
do środka.col-xs-1
lub wyrównaćcol-xs-1
do środka.row
?