亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

ul列表在div中三種居中方式怎么弄啊

問老師，ul列表在div中三種居中方式怎么弄啊，謝謝

正在回答

4 回答

學習收藏 ?謝謝

0 回復 有任何疑惑可以回復我~

額 ?我懂了?

0 回復 有任何疑惑可以回復我~ 
<!DOCTYPE?html>
<html?xmlns="http://www.w3.org/1999/xhtml"?xml:lang="en">
<head>
????<meta?http-equiv="Content-Type"?content="text/html;charset=UTF-8">
????<title>淘寶搜索框</title>
????<style?type="text/css">
?.test1,.test2,.test3{
?height:?100px;
?background-color:?#ccc;
?margin-top:?20px;
????????}
?ul{
?list-style:?none;
?overflow:?hidden;
?padding:?0;
?margin:?0;
?width:?360px;
????????}

?ul?li{
?height:?20px;
?width:?100px;
?background-color:?#00aaaa;
?float:?left;
?margin-right:?20px;
?text-align:?center;
????????}
????????.test1?ul{
?margin:?0?auto;
????????}
????????.test2{
?position:?relative;
????????}
????????.test2?ul{
?position:?absolute;
?left:?0;
?top:?50%;
?transform:translate(0,-50%);
?}

????????.test3{
?position:?relative;
????????}
????????.test3?ul{
?position:?absolute;
?left:?50%;
?top:?50%;
?transform:translate(-50%,-50%);
?}
?</style>
</head>
<body>
<div?class="test1">
????<ul>
????????<li>水平居中</li>
????????<li>水平居中</li>
????????<li>水平居中</li>
????</ul>
</div>
<div?class="test2">
????<ul>
????????<li>垂直居中</li>
????????<li>垂直居中</li>
????????<li>垂直居中</li>
????</ul>
</div>
<div?class="test3">
????<ul>
????????<li>水平垂直居中</li>
????????<li>水平垂直居中</li>
????????<li>水平垂直居中</li>
????</ul>
</div>
</body>
</html>


1 回復 有任何疑惑可以回復我~
#1

sealkie 提問者

額 我懂了 謝謝
2015-11-09 回復 有任何疑惑可以回復我~

你說的三種居中方式指的是什么？

0 回復 有任何疑惑可以回復我~
#1

sealkie 提問者

水平居中 垂直居中 和水平垂直居中吧
2015-11-07 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
HTML5和CSS3扁平化風格博客
  • 參與學習       86786    人
  • 解答問題       406    個

HTML5與CSS3搭建超酷扁平化風格博客

進入課程

ul列表在div中三種居中方式怎么弄啊

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號