使用 text-align 設定：
left 靠左
center 置中
right 靠右

是對 display : inline、inline-block 行內元素有效

例如：文字、圖片、<span>、和設定成inline-block的區塊

範例1：

<style type="text/css">
#box1{
    border: 1px solid gray;
    text-align: center;
    /* text-align: right; */
}
#b1{
    border: 1px solid #333;
    height: 100px;
    width: 100px;
    background-color: lime;
    display: inline-block;
}
</style>
<div id="box1">
    你好啊！
    <a href="http://www.google.com.tw" target="_blank">Google</a>
    <img src="images/logo.png">
    <span>這是一個span標籤</span>
    <div id="b1">block區塊</div>
</div>

效果展示：

你好啊！ Google 這是一個span標籤

block區塊

範例2：

<style type="text/css">
#box2{
    border: 1px solid gray;
    text-align: center;
    /* text-align: right; */
}
#b2{
    border: 1px solid #333;
    height: 100px;
    width: 100px;
    background-color: lime;
    display: inline-block;
}
</style>
<div id="box2">
    你好啊！
    <a href="http://www.google.com.tw" target="_blank">Google</a>
    <img src="images/logo.png">
    <span>這是一個span標籤</span>
    <div id="b2">block區塊</div>
</div>

效果展示：

你好啊！
Google

這是一個span標籤

block區塊

使用 margin 外距設定:
margin: 0 auto; 置中對齊
margin-left: auto; 靠右對齊
margin-right: auto; 靠左對齊

是對 display : block 區塊元素

例如：<div>、<p>

範例1：

<style type="text/css">
#box3{
    border: 1px solid gray;
}
#b31, #b32, #b33{
    border: 1px solid blue;
}
</style>
<div id="box3">
    <div id="b31">block區塊</div>
    <div id="b32">block區塊</div>
    <div id="b33">block區塊</div>
</div>

效果展示：

範例2：

<style type="text/css">
#box4{
    border: 1px solid gray;
    width: 50%;
}
#b41, #b42, #b43{
    border: 1px solid blue;
    width: 100px;
    height: 100px;
}
</style>
<div id="box4">
    <div id="b41">block區塊</div>
    <div id="b42">block區塊</div>
    <div id="b43">block區塊</div>
</div>

效果展示：

範例3：

<style type="text/css">
#box5{
    border: 1px solid gray;
    width: 50%;
    margin: 0 auto;         /* 讓box置中 */
}
#b51, #b52, #b53{
    border: 1px solid blue;
    width: 100px;
    height: 100px;
}
#b51{
    margin-right: auto;     /* 讓div靠左 */
}
#b52{
    margin: 0 auto;         /* 讓div置中 */
}
#b53{
    margin-left: auto;      /* 讓div靠右 */
}
</style>
<div id="box5">
    <div id="b51">block區塊</div>
    <div id="b52">block區塊</div>
    <div id="b53">block區塊</div>
</div>

效果展示：