Как относительно выровнять текст с CSS? - PullRequest
Новая
       22

Как относительно выровнять текст с CSS?

0 голосов
/ 30 августа 2018

Я стремлюсь выровнять знаки равенства в моих уравнениях. Я пробовал span и div, но выравнивание заканчивается, если размер содержимого LHS> RHS:

https://jsfiddle.net/gytmx256/6/

<span class="ctr">
    <span class="lft">\(1+2\ \) </span> \(=\) 
    <span class="lft"> \(\ 3\)</span>
</span>
<br>
<span class="ctr">
    <span class="lft">\(1+5\ \) </span> \(=\) 
    <span class="lft"> \(\ 6 + 2 - 2\)</span>
</span>
<br>
<span class="ctr">
    <span class="lft">\(1 + 3 + 2\ \) </span> \(=\) 
    <span class="lft"> \(\ 6 + 2 - 2\)</span>
</span>

.ctr{position: absolute; left: 40%;}
.lft{position: relative; display: inline;}

Как я могу выровнять знаки равенства для любого размера уравнения? Помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Одним из вариантов является то, что вы можете просто использовать таблицу и перемещать левые боковые элементы вправо, т.е. .lft {float:right:}

Проверьте здесь рабочий пример: https://jsfiddle.net/r6bxgem3/

Таблица будет выглядеть так: 

.lft {
  float: right;
  display: inline;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.main {
  flex: 80%;
  background-color: white;
  padding: 20px;
  overflow: hidden;
  position: relative;
}

.left {
  flex: 20%;
  background-color: #f1f1f1;
  padding: 20px;
}
<head>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>
</head>

<div class="row">
  <div class="left">Stuff</div>
  <div class="main">

      <table><tr><td><span class="lft">
     
      \(1+2\ \)                                      <!--LHS-->
      </span></td><td>\(=\) </td><td>                <!--Equal sign-->
      \(\ 3\)                                        <!--RHS-->
      </td></tr><tr><td><span class="lft">

      \(1+5\ \)                                                         
      </span></td><td>\(=\)</td><td>
      \(\ 6+2-2\)                                                            
      </td></tr><tr><td><span class="lft">

      \(1+3+2\ \)                                                         
      </span></td><td>\(=\)</td><td>
      \(\ 6+2-2\)                                                           
      </td></tr>

      </table>

 </div></div>

Надеюсь, это будет полезно.

0 голосов
/ 30 августа 2018 

.ctr {
    margin-left: auto;
    margin-right: auto;
}
<span class="ctr"><span class="lft">\(1+2\ \) </span> \(=\) <span class="lft"> \(\ 3\)</span></span><br>
<span class="ctr"><span class="lft">\(1+5\ \) </span> \(=\) <span class="lft"> \(\ 6 + 2 - 2\)</span></span><br>
<span class="ctr"><span class="lft">\(1 + 3 + 2\ \) </span> \(=\) <span class="lft"> \(\ 6 + 2 - 2\)</span></span>

Что вы можете сделать, это:

Это будет делать две вещи: центрировать <span> с, а также делать их отзывчивыми.

...