Ich habe eine kleine Herausforderung, für die ich keine Lösung für Stack Overflow gefunden habe.

Das habe ich bekommen:

Und so würde es mir gefallen:

Um diesen Titeleffekt zu erzeugen, verwende ich die absolute Position. Ich kenne nicht einmal die Breite und die Höhe von meinem Titel. Bei Verwendung dieser Lösung kommt es also zu großen Textbrüchen.

Mein HTML:

<div class="content">
  <h1 class="title">February 2015</h1>
  <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>

Mein CSS:

.content {
  border: 3px double black;
  padding-top: 60px;
  position: relative;
  width: 350px;
}

.content p { margin: 20px; }

.title {
  background: black;
  border-radius: 5px;
  color: white;
  left: 50%;
  padding: 10px;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  top: 0;
}

Siehe ein Beispiel für Codepen, um dir das Leben zu erleichtern:http: //codepen.io/caio/pen/ZYoyP