0

I tried align-self-center and my-auto but cannot center these h3 and p tags. Where is my fault? `

 <div class="container production">
        <div class="row">
            <div class="col-md-10 offset-md-1 col-12">
                <h2>xxxxxxxxxxxxxxxxxx</h2>
                <div class="row production-row">
                    <div class="col-md-6">
                        <img src="{{ asset('images/picture.png') }}" class="img-fluid"alt="">
                    </div>
                    <div class="col-md-6">
                        <div class="align-self-center">
                            <h3>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</h3>
                            <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
                        </div>
                        
                    </div>
                </div>
dippas
  • 58,591
  • 15
  • 114
  • 126
kestane
  • 19
  • 2

3 Answers3

0

Based on your code submitted text-align:center works if applied to your h3 and p tags. Are you using bootstrap? If you are you can use class text-center instead of align-self-center

h3, p{
text-align:center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container production">
        <div class="row">
            <div class="col-md-10 offset-md-1 col-12">
                <h2>xxxxxxxxxxxxxxxxxx</h2>
                <div class="row production-row">
                    <div class="col-md-6">
                        <img src="https://via.placeholder.com/150" class="img-fluid"alt="">
                    </div>
                    <div class="col-md-6">
                        <div class="align-self-center">
                            <h3>aaaaaaaaa</h3>
                            <p>bbbbbbbbbbbbbbbbbb</p>
                        </div>
                        
                    </div>
                </div>
DCR
  • 14,737
  • 12
  • 52
  • 115
0

use this :

<div class="col-md-6">
   <div class="text-center">
      <h3>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</h3>
      <p class="text-break">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
   </div>
</div>
iman madani
  • 299
  • 1
  • 12
0

You can also directly use bootstrap classes to center align h3 and p elements using class name as align-items-center

Mehul Jadhav
  • 1
  • 1
  • 2