Bagaimana cara saya memusatkan elemen span secara horizontal di dalam div

123

Saya mencoba untuk memusatkan kedua link 'view website' dan 'view project' di dalam div sekitarnya. Bisakah seseorang menunjukkan apa yang harus saya lakukan agar ini berhasil?

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
sumber
Terkait: stackoverflow.com/questions/7886460/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Berikut adalah dua metode sederhana untuk memusatkan elemen dalam div, secara vertikal, horizontal atau keduanya (CSS murni): stackoverflow.com/a/31977476/3597276
Michael Benjamin

Jawaban:

134

Salah satu opsinya adalah memberikan <a>tampilan inline-blockdan kemudian menerapkan text-align: center;pada blok penampung (hapus pelampung juga):

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/

terapung
sumber
1
Ini melakukan trik untuk saya dalam tema yang cukup kompleks yang perlu saya retas sedikit. Tautan ke JSFiddle lebih jauh sangat luar biasa untuk memungkinkan saya menguji. Saya mengedit entri ini untuk menyertakan perubahan "overflow: hidden" menjadi "overflow: hidden;"
seri ..
1
Sepertinya solusi yang sangat bersih.
Jim Aho
Lihat jawaban Ahmed Bahtity di bawah ini, style = "text-align: center", ini jauh lebih ringkas.
Wallace Howery
142

pilihan lain adalah memberikan rentang display:table;dan memusatkannyamargin:0 auto;

span {
display:table;
margin:0 auto;
}
pengguna1721135
sumber
4
Selalu menarik untuk melihat solusi yang berbeda untuk masalah yang sama.
Jim Aho
Hanya didukung di browser yang diperbarui dalam beberapa tahun terakhir. caniuse.com/#feat=css-table
CamHart
1
solusi terbaik IMO
Martijn Scheffer
10 
<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>
Ahmed Bahtity
sumber
8

Menerapkan inline-blockelemen yang akan dipusatkan dan menerapkan text-align:centerke blok induk melakukan trik bagi saya.

Bekerja bahkan pada <span>tag.

Imam Talha
sumber
1

Span bisa menjadi sedikit rumit untuk ditangani. jika Anda mengatur lebar rentang mengajar Anda dapat menggunakan

margin: 0 auto;

untuk menengahkannya, tetapi kemudian berakhir di jalur yang berbeda. Saya akan menyarankan mencoba pendekatan yang berbeda untuk struktur Anda.

Ini adalah jsfiddle yang saya buat dengan luar kepala: jsFiddle

EDIT:

Jawaban Adrift adalah solusi termudah :)

David Ziemann
sumber
0

Saya berasumsi Anda ingin memusatkannya pada satu baris dan bukan pada dua baris terpisah berdasarkan biola Anda. Jika itu masalahnya, coba css berikut:

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

Saya menghapus pelampung karena Anda ingin memusatkannya, dan kemudian membuat rentang yang mengelilingi tautan menjadi tengah dengan menambahkan margin: 0 otomatis ke sana. Akhirnya, saya menambahkan lebar statis ke bentang. Ini memusatkan tautan pada satu baris di dalam div merah.

Duffmaster 33
sumber