center item within viewport rather than containing bootstrap column

Question

I am trying to center an item within the viewport rather than the containing bootstrap column. The paragraph shown in the picture is within a bootstrap column with a .col-md-4 class assigned to it. When I hover over each picture, I want the paragraph underneath to be center within the viewport. Instead, it appears as though the paragraph is left aligned within the bootstrap column. Below is the current CSS I have for the paragraph and I included a link above to better illustrate the problem.

.TestimonyParagraph{
    font-size: 20px;
    margin-top: 15px;
    position: relative;
    width: 50vw;
    left: 0;
    right: 0;
    padding: 15px;
    color: #ffffff;
    background-color: #898989;
    display: none;
}

.home-features__box:hover + .TestimonyParagraph{
    display: block;
}

You have set the `width:50vw` what will show the content in the half of the current viewport. Have you tried changing this value? — Alex Ljamin, Mar 16 '17 at 00:19

score 1 · Answer 1 · answered Mar 16 '17 at 05:13

1

You can use the

margin: 0 auto;

in a traditional way. You can user flex box otherwise:-

display: flex;
justify-content: center;

Provide the structure of your code for better answers

answered Mar 16 '17 at 05:13

Abin Thaha

4,493
3
13
41

I tried both and it still trying to align within the bootstrap column. – Mar 16 '17 at 21:41
I'm having trouble getting the code snippet feature to recognize the bootstrap CDN or I would post it that way. – Mar 16 '17 at 21:43

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

Did you try adding a

margin:0 auto;

to TestimonyParagraph? Also check here: Center a column using Twitter Bootstrap 3

If not, please post a Jsfiddle or Codepen of your structure so we can assist better.

edited May 23 '17 at 12:00

Community

1
1

answered Mar 15 '17 at 20:31

mrsq

235
2
14

Yes I did try that. I added a code snippet here on stackoverflow but it isn't pulling in bootstrap properly – Mar 16 '17 at 21:28

score 0 · Answer 3 · answered Mar 16 '17 at 22:25

0

Since you have set width: 50vw; for this element, you can simply use left: 25vw; (25 left + 50 for the div + 25 to the right are 100vw - full width, therefore a way to center it).

However, if the parent element doesn't span the full width (which seems to be the case in your picture), it's better do the same with percent : left: 25% and width: 50%.

answered Mar 16 '17 at 22:25

Johannes

64,305
18
73
130

I have tried that as well. The problem is that when I use width: 50% it is 50% of the parent element (which is the width of one of those pictures above). I need the Testimony paragraph to stay within it's parent div but find a way to ignore the width of it's parent. – Mar 19 '17 at 19:30

center item within viewport rather than containing bootstrap column

3 Answers3