Jak wyśrodkować w poziomie element span w elemencie div

123

Próbuję wyśrodkować dwa łącza „wyświetl witrynę” i „wyświetl projekt” wewnątrz otaczającego elementu div. Czy ktoś może wskazać, co muszę zrobić, aby to zadziałało?

JS Fiddle: http://jsfiddle.net/F6R9C/

HTML

<div>
  <span>
    <a href="#" target="_blank">Visit website</a>
    <a href="#">View project</a>
  </span>
</div>

CSS

div { background:red;overflow:hidden }

span a {
    background:#222;
    color:#fff;
    display:block;
    float:left;
    margin:10px 10px 0 0;
    padding:5px 10px
}

css

— J82
źródło

Związane z: stackoverflow.com/questions/7886460/…

— Ciro Santilli 郝海东冠状病六四事件法轮功

Oto dwie proste metody wyśrodkowania elementów w elemencie div, w pionie, poziomie lub w obu (czysty CSS): stackoverflow.com/a/31977476/3597276

— Michael Benjamin

134

Jedną z opcji jest <a>wyświetlenie, inline-blocka następnie zastosowanie text-align: center;na zawierającym go bloku (usunięcie również pływaka):

div { 
    background: red;
    overflow: hidden; 
    text-align: center;
}

span a {
    background: #222;
    color: #fff;
    display: inline-block;
    /* float:left;  remove */
    margin: 10px 10px 0 0;
    padding: 5px 10px
}

http://jsfiddle.net/Adrift/cePe3/

— dryfujący
źródło

1

To załatwiło sprawę w przypadku średnio złożonego tematu, który musiałem trochę zhakować. Link do JSFiddle dalej był niesamowity, ponieważ pozwolił mi przetestować. Edytowałem ten wpis, aby uwzględnić zmianę „overflow: hidden” na „overflow: hidden;”

— zwrócił ..

1

Wygląda na bardzo czyste rozwiązanie.

— Jim Aho,

Zobacz odpowiedź Ahmeda Bahtity poniżej, style = "text-align: center", jest o wiele bardziej zwięzła.

— Wallace Howery

142

inną opcją byłoby podanie zakresu display:table;i wyśrodkowanie go przezmargin:0 auto;

span {
display:table;
margin:0 auto;
}

— user1721135
źródło

4

Zawsze ciekawie jest zobaczyć różne rozwiązania tego samego problemu.

— Jim Aho,

Obsługiwane tylko w przeglądarkach zaktualizowanych w ciągu ostatnich kilku lat. caniuse.com/#feat=css-table

— CamHart

1

najlepsze rozwiązanie IMO

— Martijn Scheffer

10

<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>

— Ahmed Bahtity
źródło

8

Zastosowanie inline-blockdo elementu, który ma być wyśrodkowany i zastosowanie text-align:centerdo bloku rodzica załatwiło sprawę.

Działa nawet na <span>tagach.

— Talha Imam
źródło

1

Rozpiętości mogą być nieco trudne w obsłudze. jeśli ustawisz szerokość zakresu uczenia, którego możesz użyć

margin: 0 auto;

aby je wyśrodkować, ale potem kończą na różnych liniach. Sugerowałbym wypróbowanie innego podejścia do swojej struktury.

Oto jsfiddle z czubkiem głowy, z którym się nagrałem : jsFiddle

EDYTOWAĆ:

Odpowiedź Adrift to najłatwiejsze rozwiązanie :)

— David Ziemann
źródło

0

Zakładam, że chcesz je wyśrodkować na jednej linii, a nie na dwóch osobnych liniach w zależności od Twoich skrzypiec. W takim przypadku wypróbuj następujący CSS:

 div { background:red;
      overflow:hidden;
}
span { display:block;
       margin:0 auto;
       width:200px;
}
span a { padding:5px 10px;
         color:#fff;
         background:#222;
}

Usunąłem pływak, ponieważ chcesz go wyśrodkować, a następnie wyśrodkowałem zakres otaczający linki, dodając do nich margin: 0 auto. Na koniec dodałem statyczną szerokość do rozpiętości. Spowoduje to wyśrodkowanie łączy w jednej linii w czerwonym div.

— Duffmaster33
źródło

0

tylko css div można wyśrodkować zawartość

div{
       display:table;
       margin:0 auto;
    }

http://jsfiddle.net/4q2r69te/1/

— MrBii
źródło