Я использую Bootstrap 4 и пытаюсь выровнять значок Font Awesome по горизонтали и вертикали. Я хочу использовать только встроенный CSS Bootstrap 4, без пользовательского CSS.
Мне удалось центрировать его по вертикали с помощью align-self-center
, однако использование justify-content-center
по горизонтали, похоже, не работает, значок по-прежнему выровнен по левому краю.
<div class = "row">
<div class = "col-6">
<h2 class = "text-left">Heading 2</h2>
<p class = "text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
<p class = "text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
</div>
<div class = "col-6 align-self-center justify-content-center">
<i class = "far fa-thumbs-up fa-10x"></i>
</div>
</div>
попробуйте добавить text-center
вместо justify-content-center
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" >
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
<div class = "row">
<div class = "col-6">
<h2 class = "text-left">Heading 2</h2>
<p class = "text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
<p class = "text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
</div>
<div class = "col-6 align-self-center text-center">
<i class = "far fa-thumbs-up fa-10x"></i>
</div>
</div>