Center text in element proportionally

Question

Center text in element proportionally

Navigation

#1 by (1 votes)

1

In the example below, transform: translate(-50%,-50%); to hold a text in the middle of the element. But it is not a solution that works on all browsers. I would like to do it myself, 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

asked by anonymous 22.03.2018 / 20:36

1 answer

Pop up to print, keeping the action values I want to make a decimal to binary converter without using itoa () or vectors in C

score 1 · Accepted Answer

The version for this oldest alignment type I know would be with display:table , so 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>