CSS居中并降低div容器的高度

Question

这里我正在编辑wordpress插件的CSS。该插件的目的是在网站顶部添加一个固定位置框，用户可以在该页面上滚动网站，然后点击链接。

我遇到的问题是我希望盒子与主要网站“深蓝”乐队的高度相匹配。更改CSS并使用类似高度：80％;在这里工作不太好。

我还想把淡蓝色的盒子居中到中心（我也要改变它的宽度以适应它所拥有的内容）。

这是我第一次使用CSS，所以我不确定我在这里做什么。我无法直接编辑代码，只需输入CSS“选项”。

我的代码是：

<div id="topbar" style="position:fixed; top: 20; padding:0; margin:0; width:  50%; z-index: 99999;opacity:.7; height:80%;"  >
<div id="wptbheadline1" style="background-repeat: no-repeat; vertical-align:middle; family:georgia; padding-right:10px; padding-left:10px;"   >Check out our Twitter
  <a style=""   HTML Option B</a>
</div>
</div>

Answer 1

我认为这是你想要实现的目标;见下文。

＆＃13;

＆＃13;

#topbar {background: orange;color:#fff;} /* ignore this css */

＆＃13;

<div id="topbar" style="position:fixed; top: 20; padding:7px 0; margin:0; width:  50%; z-index: 99999;opacity:.7; transform: translateX(50%); text-align: center"  >
<div id="wptbheadline1" style="background-repeat: no-repeat; vertical-align:middle; family:georgia; padding-right:10px; padding-left:10px;"   >Check out our Twitter
  <a style=""   HTML Option B</a>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

调整padding :7px 0;以适合身高。