-2

https://codepen.io/nisofwareengineer/pen/rNBvgLa

What I am trying to do is simply move all the content inside the black box into the center.

The code I am working with is:

<div class="col-lg-12 col-md-12 col-sm-12  mb-md-10 mb-sm-10">
                    <div class="p-20 bg-dark text-center  text-white h-position-relative" style="height:300px;">
                        <h3 class="p-0 mb-10 b-heading__secondary-2"><span class="text-info font-italic">we</span><span class="text-primary b-font__primary">Fit</span> Cycle Accessories</h3>
                        <p class="p-0 mb-20 b-font__secondary fs-xxlarge font-weight-bold"><span class="text-primary"><em>for</em> £8</span> per bike, just ask in store*</p>
                        <p class="pb-0 mb-20 b-font__secondary fs-large fs-sm-medium font-weight-bold"><span class="font-italic">*If you have CycleCare or purchase CycleCare for your bike, this will be free.</span></p>
                    </div>
                </div>

I have tried various things such as adding the below to the class of the inner div:

justify-content:center;

align-items:center;

as well as various bootstrap margin and padding effects such as p-50, m-50 etc.

However no matter what I do the content inside the dark area is not moving to the center

The only thing that ''works'' is

   style="position:absolute; left:30%; top:             30%;"

But this is not feasible since it's a nightmare to work with in terms of responsiveness

JoyFulCode
  • 443
  • 1
  • 6
  • 13
  • 2
    Please go read [ask]. Code relevant to your problem belongs directly into your question, in text form - properly formatted; as a code snippet, when appropriate - and not just dumped onto an external platform. Please edit your question accordingly first of all. – misorude Sep 12 '19 at 10:10
  • You can use `margin: 0 auto` to center an element within another. – Kei Sep 12 '19 at 10:12
  • Your outer column element is the flexbox item here - but “centering” the content inside that is of course pointless, because the next div container you wrapped into this has `height:300px`, and is what spans up the outer element to its height in the first place. You either want move that height to the outer container, so that you can center the less high content inside of that; or you want to make the inner one a flex element as well, and then use justify-content on that. – misorude Sep 12 '19 at 10:13
  • The link of codepen which is given by you is working fine. All content is in the center of the black box. – Alok Mali Sep 12 '19 at 10:13
  • @Alok Mali center in terms of vertical as well – JoyFulCode Sep 12 '19 at 10:14

2 Answers2

1

You haven't shown us which element you were trying to add your flex properties to, but if you add them to the dark box, vertical centering works fine.

.my-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <title> RoadWorld </title>
</head>

<div class="col-lg-12 col-md-12 col-sm-12  mb-md-10 mb-sm-10">
  <div class="p-20 bg-dark text-center  text-white h-position-relative justify-content-center my-box" style="height:300px;">
    <h3 class="p-0 mb-10 b-heading__secondary-2"><span class="text-info font-italic">we</span><span class="text-primary b-font__primary">Fit</span> Cycle Accessories</h3>
    <p class="p-0 mb-20 b-font__secondary fs-xxlarge font-weight-bold"><span class="text-primary"><em>for</em> £8</span> per bike, just ask in store*</p>
    <p class="pb-0 mb-20 b-font__secondary fs-large fs-sm-medium font-weight-bold"><span class="font-italic">*If you have CycleCare or purchase CycleCare for your bike, this will be free.</span></p>
  </div>
</div>
Turnip
  • 35,836
  • 15
  • 89
  • 111
0
.text-center{
     display:flex; /*  giving flex ability to element and its child's */
     justify-content:center; /* align items vertically */
     align:items:center; /* align items horizontally */
     flex-direction:column; /*puts child's in column order  */
 }

for learning more about display flex you can see this website https://flexboxfroggy.com

Khashayar Pakkhesal
  • 416
  • 3
  • 15