CSS Центрирование и уменьшение высоты контейнера div

Question

Здесь я работаю над редактированием CSS плагина wordpress. Цель плагина - добавить фиксированную позицию в верхней части веб-сайта, где пользователь может прочитать и щелкнуть по ссылке при прокрутке сайта.

Вопросы, которые я имею, что я хочу, чтобы поле, чтобы соответствовать основным сайтам «темно-синий» высота группы. Изменение 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

Я думаю, что это то, что вы хотите достичь; Смотри ниже.

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

<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>

Отрегулируйте padding :7px 0;, чтобы соответствовать высоте.