Як розташувати текст над зображенням у css

Як центрувати текст над зображенням у css?

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>

Я хочу зробити щось на кшталт описаного нижче, але у мене виникають труднощі, ось мій поточний css

<style>
.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}
</style>

Коли я використовую фонове зображення, я не отримую жодного виводу з html2pdf:

<style>
#image_container{
    width: 1000px;
    height: 700px;
    background-image:url('switch.png');
}
</style>
<a href="prints.php">Print</a>
<?php ob_start(); ?>
<div id="image_container"></div>
<?php 
$_SESSION['sess'] = ob_get_contents(); 
ob_flush();
?>

Ось print.php:

<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>

Як щодо щось подібне: http://jsfiddle.net/EgLKV/3/

Це робиться за допомогою position:absoluteта z-indexрозміщення тексту над зображенням.

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}

<div id="container">
  <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
  <p id="text">
    Hello World!
  </p>
</div>

Це ще один метод роботи з чуйними розмірами. Це дозволить тримати текст у центрі та зберігати його позицію в межах свого батьківського. Якщо ви не хочете, щоб він був в центрі, то це ще простіше, просто працюйте з absoluteпараметрами. Майте на увазі, що основний контейнер використовується display: inline-block. Існує багато інших способів зробити це, залежно від того, над чим ви працюєте.

Виходячи з центрування невідомого

Приклад робочого кодексу тут

HTML

<div class="containerBox">
    <div class="text-box">
        <h4>Your Text is responsive and centered</h4>
    </div>
    <img class="img-responsive" src="http://placehold.it/900x100"/>
</div>

CSS

.containerBox {
    position: relative;
    display: inline-block;
}
.text-box {
    position: absolute;    
    height: 100%;
    text-align: center;    
    width: 100%;
}
.text-box:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}
h4 {
   display: inline-block;
   font-size: 20px; /*or whatever you want*/
   color: #FFF;   
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

Чому б не встановити sample.pngяк фонове зображення класу textабо h2css? Це дасть ефект, коли ви писали над зображенням.

Для чуйного дизайну добре використовувати контейнер, що має відносну компоновку та вміст (розміщений у контейнері), що має фіксований макет як.

Стилі CSS:

/*Centering element in a base container*/

.contianer-relative{ 
  position: relative;
 }

.content-center-text-absolute{ 
  position: absolute; 
  text-align: center;
  width: 100%;
  height: 0%;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 51;
}

HTML-код:

<!-- Have used ionic classes -->
<div class="row">
    <div class="col remove-padding contianer-relative"><!-- container with position relative -->
        <div class="item item-image clear-border" ><a href="#"><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></a></div> <!-- Image intended to work as a background -->
        <h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed -->
    </div>
    <div class="col remove-padding contianer-relative"><!-- container with position relative -->
        <div class="item item-image clear-border"><a href="#"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></a></div><!-- Image intended to work as a background -->
        <h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed -->
    </div>       
</div>

Для іонних сіток макета, рівномірно розташованих елементів сітки і класів , які використовуються в HTML вище, будь ласка , дивіться - Сітка: Рівномірно рознесені стовпці . Сподіваюсь, це допоможе тобі ... :)

як вказує Гаррі Джой, встановіть зображення як фон діва, а потім, якщо у вас є лише один рядок тексту, ви можете встановити висоту рядка тексту такою ж, як і висота діва, і це розмістить ваш текст у центр діва.

Якщо у вас є більше одного рядка, ви хочете встановити дисплей на стільникову та вертикальну вирівнювання до середини.

станом на 2017 рік, це більш чуйно реагує на мене. Це для введення тексту всередину над, як значок. замість числа 8 у мене була змінна для витягу даних із бази даних.

цей код розпочався з відповіді Кайласа вище

https://jsfiddle.net/jim54729/memmu2wb/3/

Мій HTML

<div class="containerBox">
  <img class="img-responsive"    src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png">
  <div class='text-box'>
   <p class='dataNumber'> 8 </p>
  </div>
</div>

і мій css:

.containerBox {
  position: relative;
  display: inline-block;
}

.text-box {
  position: absolute;
  height: 30%;
  text-align: center;
  width: 100%;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 30px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: 120px;
  margin: auto;
  padding: auto;
}

.dataNumber {
  margin-top: auto;
}

Невеликий і короткий спосіб зробити те саме

HTML

<div class="image">
     <p>
        <h3>Heading 3</h3>
        <h5>Heading 5</h5>
     </p>
</div>

CSS

.image {
        position: relative;
        margin-bottom: 20px;
        width: 100%;
        height: 300px;
        color: white;
        background: url('../../Images/myImg.jpg') no-repeat;
        background-size: 250px 250px;
    }