【问题标题】：How to get text to display centre of page on same line as a list如何获取文本以在与列表相同的行上显示页面中心
【发布时间】：2012-03-29 12:42:34
【问题描述】：

请查看我的网站：

http://www.budgie.richardcmpage.com/index.php

我已经尝试了各种方法，但无法将文本放在屏幕中间，而社交图标只是漂浮在右侧：

代码 -

<div class='social_icons'>          
         <span class="social_icons_user"> Not already a user? <a class="signup2" href="register.php">Sign up here!</a>  
            <ul class="social_icons_ul">
                <li><a href="http://facebook.com/Budgie.SocialDiscussion"><img src="Images/facebook.png" alt="Facebook" width="16" height="16"></a></li>        
                <li><a href="https://profiles.google.com/u/0/112265357246183728158"><img src="Images/google.png" alt="Google" width="16" height="16"></a></li>              <li><a href="http://twitter.com/Budgie_SD"><img src="Images/twitter.png" alt="Twitter" width="16" height="16"></a></li> 
            </ul>               
          </span> 

</div>

CSS

.social_icons{
    height:50px;
    width:800px;
    background-color:#10260F;
    font-size:12px;
    margin-left:auto;
    margin-right:auto;      
    margin-top:10px;
    color:#FFF;
    background-color:red;
    margin-bottom:10px;
}

.social_icons_user{     
    display:block;
    text-align:center;
    background-color:black; 
}

.social_icons_ul{       
    float:right;
}

.social_icons_ul li{
    display:inline;     
}

【问题讨论】：

您的页面有 2 个 doctype，超过一个 html 元素，并且您正在加载 5 次相同的 CSS 文件：您最好在尝试调试其他任何内容之前验证您的页面，否则您会浪费您的有时间调试错误的东西。

标签： html css center alignment

【解决方案1】：

.social_icons_ul {
position: absolute;
right: 0px;
top: 0px;
}

.social_icons_user {
display: block;
text-align: center;
background-color: black;
position: relative;
}

你是老兄

【讨论】：

哇啊啊天才！！！谢谢你！！你能谈谈css的位置部分吗？

【解决方案2】：

你好很简单，你可以在你的css中定义

Css 代码

  .social_icons{
    height:50px;
    width:800px;
    background-color:#10260F;
    font-size:12px;
    margin-left:auto;
    margin-right:auto;      
    margin-top:10px;
    color:#FFF;
    background-color:red;
    margin-bottom:10px;
}

.social_icons_user{     
    display:block;
    text-align:center;
    background-color:black;
}

.social_icons_ul{       
    float:right;
}

.social_icons_ul li{
    display:inline;     
}

你的html代码在这里

<div class='social_icons'>          
         <span class="social_icons_user"> Not already a user? <a class="signup2" href="register.php">Sign up here!</a>  
            <ul class="social_icons_ul">
                <li><a href="http://facebook.com/Budgie.SocialDiscussion"><img src="Images/facebook.png" alt="Facebook" width="16" height="16"></a></li>        
                <li><a href="https://profiles.google.com/u/0/112265357246183728158"><img src="Images/google.png" alt="Google" width="16" height="16"></a></li>              <li><a href="http://twitter.com/Budgie_SD"><img src="Images/twitter.png" alt="Twitter" width="16" height="16"></a></li>
            </ul>               
          </span>

</div>

现在live demo here you can check

【讨论】：