Блог

Мне в основном нужно воспроизвести следующий заголовок изображения, «опыт»:

Как я могу это сделать?

Спасибо!

Что-то вроде этого, вероятно, сделает работу: http://jsfiddle.net/R52sq/1 /

Нет плавающих значений. Имеет только один дополнительный тег, может содержать содержимое любой длины (даже больше, чем ширина браузера).

Единственный недостаток, вероятно, он не работал в IE6 и, возможно, работал только частично в IE7 (для уверенности необходимо тестирование в IE7, нет на текущем компьютере).

https://jsfiddle.net/5jge1qnx/

HTML

 <div class="title">
    <h1>Title</h1>
</div>
  

CSS

 .title {
   width:100%;
   text-align:center; 
   position: relative;
}

h1 {
   position:relative; 
   padding:10px; 
   background: #f3f5f6;
   display: inline-block;
   z-index: 1;
}

.title::after {
   content:'';
   position: absolute;
   left: 0;
   right: 0;
   top: 50%;
   height: 1px;
   background: #000;
   z-index:0;
}
  

Будьте осторожны с шириной фона вашего заголовка! Он должен совпадать с фоном вашего родительского элемента или тела!

Используя divs, это должно сработать:

HTML:

 <div id="left"></div><div id="title">Experience</div><div id="right"></div>
  

CSS:

 #left {
    width:40%;
    float:left;
    border-bottom:1px solid #CCC;
    height:20px;
}
#right {
    width:40%;
    float:left;
    border-bottom:1px solid #CCC;
    height:20px;
}
#title {
    width:20%;
    float:left;
    height:20px;
    text-align:center;
}