Question

我正在Weebly建立一个网站（我觉得这样会不赞成，但我没有太多时间去做）。我希望组织的徽标位于中间，右上角有社交按钮，顶部和底部的边距为5px。在html中，我有这个：

<div id="header">
    <div id="social">{social}</div>
    <div id="sitename">{logo}</div>
</div>

以下是如何定义标题和网站名称ID

#header {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
}

#sitename a,
#sitename a:link,
#sitename a:visited {
    color: #484848;
    font-family: 'Raleway', sans-serif;
    font-size: 36px;
    text-transform: uppercase;
    background: url('teal_icons.png') -9999px -9999px no-repeat;
    margin: auto;
}

#social {
    float: right;
}

我尝试遵循建议here，但它没有帮助。

任何帮助将不胜感激。

Answer 1

这可能有所帮助。

CSS：

#header {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
}
#sitename {
    color: #484848;
    font-family:'Raleway', sans-serif;
    font-size: 36px;
    text-transform: uppercase;
    margin: auto;
    text-align:center;
}
#social {
    float: right;
    text-align-right;
}
.clear { clear:both }

HTML：

<div id="header">
    <div id="social">[FB] [TW] [IN] [..]</div>
    <div id="sitename">LOGO OF <br/> YOUR COMPANY</div>
    <div class="clear"></div>
</div>

Answer 2

尝试使用此

#social {
    float: left;
    width: 200px; /*Your width here*/
}

#sitename {
    margin-left: 200px; /*Your width here*/
    margin-top: 5px;
    margin-bottom: 5px;
}

#header {
    overflow: hidden; /*If not do this margin top will not work*/
}

Answer 3

<强> CSS

#header {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
}

#sitename a,
#sitename a:link,
#sitename a:visited {
    color: #484848;
    font-family: 'Raleway', sans-serif;
    font-size: 36px;
    text-transform: uppercase;
    background: url('teal_icons.png') -9999px -9999px no-repeat;
    margin: auto;
}

#sitename:before {
  content:"";
  display:block;
  clear:both;
}

#social {
    float:right;
    margin:5px 0;
}

Codepen example

两个div并排在一个中心，另一个在右边

3 个答案: