網頁設計相對佈局中如何實現水平定位？

設計
關注：1.03W次

我做了一個css過渡樣式，但是不知道如何將它水平居中對齊。代碼如下：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""&gt;&lt;html xmlns=""&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;&lt;title&gt;Untitled Document&lt;/title&gt;&lt;style&gt;bg{width:100%;height:100%;margin:0px;}{height:60%;top:20%;position:absolute;}1{position: relative;width: 162px;height: 100%;background: #000;float:right;margin-left:300px;-webkit-transition: width 2s ease 0s, margin-left 2s;-moz-transition: width 2s ease 0s, margin-left 2s;-ms-transition: width 2s ease 0s, margin-left 2s;-o-transition: width 2s ease 0s, margin-left 2s;transition: width 2s ease 0s, margin-left 2s;}2{position: relative;width: 108px;height: 100%;background: #999;float:right;-webkit-transition: width 2s ease 0s, margin-left 2s;-moz-transition: width 2s ease 0s, margin-left 2s;-ms-transition: width 2s ease 0s, margin-left 2s;-o-transition: width 2s ease 0s, margin-left 2s;transition: width 2s ease 0s, margin-left 2s;}3{position: relative;width: 54px;height: 100%;background: #ccc;float:right;-webkit-transition: width 2s ease 0s, margin-left 2s;-moz-transition: width 2s ease 0s, margin-left 2s;-ms-transition: width 2s ease 0s, margin-left 2s;-o-transition: width 2s ease 0s, margin-left 2s;transition: width 2s ease 0s, margin-left 2s;}1:hover {width: 962px;margin-left:200px;}3:hover {width: 854px;}2:hover {width: 908px;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="main"&gt;&lt;div class="box1"&gt;1&lt;div class="box2"&gt;1&lt;div class="box3"&gt;1&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

標籤：網頁佈局

文章版權屬於文章作者所有，轉載請註明 https://xuewengu.com/flhy/sheji/9geov1.html

當前位置：學問谷 >

行業範例 >設計 >

網頁設計相對佈局中如何實現水平定位？

相關內容

熱門文章

猜你喜歡