Center text on element, proportionally

Asked

Viewed 53 times

1

In the example below we use, transform: translate(-50%,-50%); to keep a text in the middle of the element. But it’s not a solution that works in all browsers. I would really like to do it, but with simple css or even with jquery.

.artigo-content {
    background: #fff;
    color: #666666;
    border: 1px solid #F0F0F0;
    padding: 0 30px;
    height: 100%;
    text-align: center;
    position: relative;
    height:300px;
}

.artigo-inner {
    width: 90%;
    margin: auto;
    position: absolute;
    top: 50%; left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
<div class="artigo-main">
  <div class="artigo-content">
    <div class="artigo-inner">
      <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo. Praesent eu ex ligula.</a></h3>
      <p>Abril 26, 2018</p>
    </div>
  </div>
</div>

css
  • 1

    The simplest thing is display:flex

  • 1

    @Isac really the simplest form is with Flex indisputable. But browser support for Flex is even worse than Transform https:/caniuse.com/

  • 1

    @hugocsl Although the support is not yet 100%. They all support from certain versions. The only ugly duckling is the same as usual, IE, but you’d expect it. With vendor prefixes goes further back in versions.

  • 1

    @Isac Because it is the damn IE always it, but many companies only homologate for it, because thinking about what the author of the question spoke I made the comment.

  • If you are using the Bootstrap 4, then you are already supporting only the IE 10, and IE since version 9 supports transformações 2d

1 answer

1


The version for this type of older alignment I know would be with display:table, with this you do not need to use fixed sizes. (using fixed values also to align in the center)

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.artigo-main {
    height: 100%;
    width: 100%;
    display: table;
    text-align: center;
}
.artigo-content {
    display: table-cell;
    vertical-align: middle;
    background: #fff;
    color: #666666;
    border: 1px solid #F0F0F0;
}
.artigo-inner {
    margin: auto;
    width: 90%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="artigo-main">
    <div class="artigo-content ">
        <div class="artigo-inner">
            <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo. Praesent eu ex ligula.</a></h3>
            <p>Abril 26, 2018</p>
        </div>
    </div>
</div>

  • Perfect solution.

  • Is it possible to use this within a bootstrap grid? I’m trying here, but it doesn’t work.

  • John try to put ! Important in all styles you use to make this customization mainly in the display, you will have to replace the bootstrap default classes so you need the ! Important.

  • works well without doing anything, I play the demo in the codepen: https://codepen.io/johnquimera/full/PRjpOY/

  • 1

    @Johnquimera great, let alone interfere in the native styles of Bootstrap better! Good luck with the project []’s I saw that you are using Bootstrap 4 right, then research on the class "d-flex" can help you with these alignments, is with flex, but is native to BS4

  • I will certainly use it at some point, but its solution solves the problem with other browsers. Now I wanted to see if it would be possible to put a background image in this text, but not with 'background-image', but with <img> so that it is responsive,. and the centered text always adapts to the image size.

  • @Johnquimera creates a new question not to mess up the one that has already been answered and I help you there. Probably this is possible to do yes! Do you want the image to occupy 100% of the height and width of where it is? Create a new question then I give you a shot if it is within my reach.

  • just created. https://answall.com/q/286090/95735

Show 3 more comments

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.