ฉันจะตั้งศูนย์กลางองค์ประกอบสแปนในแนวนอนภายใน div ได้อย่างไร

ฉันกำลังพยายามจัดลิงก์สองลิงก์ "ดูเว็บไซต์" และ "ดูโครงการ" ภายใน div โดยรอบ ใครสามารถชี้ให้เห็นสิ่งที่ฉันต้องทำเพื่อให้งานนี้

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
}

ทางเลือกหนึ่งคือให้<a>แสดงinline-blockแล้วนำไปใช้text-align: center;กับบล็อกที่มี (ลบลอยด้วย):

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/

อีกทางเลือกหนึ่งคือให้ช่วงdisplay:table;และอยู่ตรงกลางmargin:0 auto;

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

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

การใช้inline-blockองค์ประกอบที่จะจัดกึ่งกลางและการใช้text-align:centerกับบล็อกหลักเป็นเคล็ดลับสำหรับฉัน

ทำงานได้แม้กระทั่งกับ<span>แท็ก

Spans อาจเป็นเรื่องยุ่งยากเล็กน้อยในการจัดการ หากคุณตั้งค่าความกว้างของช่วงการสอนคุณสามารถใช้ได้

margin: 0 auto;

เพื่อให้พวกเขาอยู่กึ่งกลาง แต่แล้วก็จบลงในบรรทัดที่แตกต่างกัน ฉันขอแนะนำให้ลองใช้วิธีอื่นในโครงสร้างของคุณ

นี่คือ jsfiddle ฉันแคม e ขึ้นโดยปิดด้านบนของหัวของฉัน: jsFiddle

แก้ไข:

คำตอบของ Adrift เป็นทางออกที่ง่ายที่สุด :)

ฉันคิดว่าคุณต้องการจัดกึ่งกลางให้อยู่ในบรรทัดเดียวไม่ใช่สองบรรทัดที่แยกจากกันตามเสียงซอของคุณ ในกรณีนี้ให้ลอง css ต่อไปนี้:

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

ฉันลบลูกลอยออกเนื่องจากคุณต้องการจัดกึ่งกลางจากนั้นทำให้สแปนล้อมรอบลิงก์ที่อยู่ตรงกลางโดยเพิ่มระยะขอบ: 0 อัตโนมัติให้กับพวกเขา สุดท้ายฉันเพิ่มความกว้างคงที่ในช่วง สิ่งนี้จะรวมลิงก์ไว้ที่บรรทัดเดียวภายใน div สีแดง

เฉพาะ css div ที่คุณสามารถจัดกึ่งกลางเนื้อหาได้

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

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