Как выровнять тайтл (смотреть пример)

215

30 ноября 2018, 12:20

Ребята, короче, такие дела уже по-моему задавал тут вопрос этот . Не могу вертикально отцентровать элемент (в хроме норм, а в IE и firefox - нет )

http://afisha.net.ru

<div class="main  mx-auto mb3" style="margin-top: 135px"> 
	<div class="clearfix mxn1"> 
		<div class="md-col md-col-9 px1  "> 
 
 
				<div class="relative"> 
 
 
<div class="my-slider"> 
 
<?php  
global $db; 
$abc = $db->query("SELECT * FROM admin_panel WHERE label='slider' ORDER BY id desc LIMIT 0,6 "); 
while ($data = $abc->fetch_array())  
{ ?> 
				<div class="relative zoom-blurb"> 
				<div class="absolute table white mx-auto top-0 left-0 right-0 bottom-0 cover-text z1"><div class="table mx-auto"> 
					 
						<p class="h1 mb1 "><?php echo $data['title'] ?></p> 
						<p class=" mt0 mb0 xs-hide">Категория: <?php echo $data['category'] ?> Опубликовано <?php echo showDate($data['datetime']) ?></p> 
						<p class="h3 mt1 xs-hide"><?php echo $data['slogan'] ?></p> 
 
 
				</div></div> 
				<a href="fullpost/<?php echo $data['id'] ?> "><img src="<?php echo $data['image']; ?>" alt=""></a> 
			</div> 
 
 
<?php } 
 
 ?> 
 
</div> 
<!-- or ul.my-slider > li --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.2/min/tiny-slider.js"></script> 
<!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> --> 
 
 
 
 
<script> 
  var slider = tns({ 
    container: '.my-slider', 
    items: 1, 
    slideBy: 'page', 
    controls: true, 
    nav:true, 
    controlsText: ['<','>'], 
    autoplay: false 
  }); 
 
</script> 
 
								 
 
 
 
 	</div>

PS Да, и там используются классы с фреймворка BassCSS, для упрощения стилизации; tiny-slider 2.0 github.com/ganlanyuan/tiny-slider

Answer 1

Насколько я увидел, продравшись сквозь тонны всякого, там для центрирования используется блочок с абсолютным позиционированием и несколькими несовместимыми свойствами. Хром умеет разбираться с таким безобразием, позволяя разработчикам косячить, прочие браузеры - еще нет.

Универсальный и красивый способ центрирования абсолютно позиционированного блока любых размеров:

.my_class {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как выровнять элементы

Как выровнять элементы в строках? Дело в том, что заголовки разного размера и все плыветПоломал всю голову, кроме как переделать все в css grid - сделать...

164

javascript