Question

所以我们想要一个解决这个对齐要求的方法：

---------------------------
|         BlaBla          |
|    Bla BlaBla BlaBla    |
|        BlaBla Bl        |
---------------------------
|    OtherText            |
---------------------------

居中的动态 BlaBla 文本与响应宽度容器中的 OtherText 一起使用。 OtherText 应该左对齐，但是（这是根本问题）仍然与居中文本的左侧对齐。

因此，使用简单的CSS，我只能做到这一点：

---------------------------
|         BlaBla          |
|    Bla BlaBla BlaBla    |
|        BlaBla Bl        |
---------------------------
|OtherText                |
---------------------------

谁知道超级棒的CSS或JavaScript解决方案？

＆＃13;

.slider {
  width: 100%;
}
.slider .title {
  width: 80%;
  text-align: center;
}
.slider .btn {
  text-align: left;
}

＆＃13;

<div class="slider">
  <h1 class="title">BlaBla<br>Bla BlaBla BlaBla<br>BlaBla Bl</h1>
  <span class="btn">OtherText</span>
</div>

＆＃13;

Answer 1

解决方案是添加一个display: inline-block;的容器：

.slider {
  width: 100%;
  text-align: center;
  border: 1px dotted;
}
.slider .container {
  display: inline-block;
  border: 1px dotted;
}
.slider .btn {
  text-align: left;
}

<div class="slider">
  <div class="container">
    <h1 class="title">BlaBla<br>Bla BlaBla BlaBla<br>BlaBla Bl</h1>
    <div class="btn">OtherText</div>
  </div>
</div>

Answer 2

尝试并使用以下内容：

<div>
   <div id="center">
      <p>Center Align</p>
   </div>
   <div id="left">
      <p>Left Align</p>
   </div>
</div>

给#center，＃left有一定的宽度和余量：0 auto; （所以它保持居中）。

根据需要对齐它们

Answer 3

.slider .btn {
    text-align: left;
    width: 80%;
    margin: 0 auto;
    display: block;
}

应该有效

Answer 4

$query = $db->prepare("UPDATE sc_marks SET get_marks=? WHERE _sid=? AND exam_type=?");

for ($key=0; $key < count($_POST['marks']); $key++) {

            $from_marks = $_POST['from'][$key]; //add some validation here
            $get_marks = $_POST['marks'][$key]; //e.G with regex

            //echo $from_marks." ";
            if($get_marks > $from_marks){
                // header("location: ../../pages/marks.php?over=err");
                // break;

                echo "Cant add more marks <br/>";

            }
            else{
                echo $get_marks."<br/>";

                $query->execute($get_marks, $sc_foreign_id, $select_exam_type); 

            }
}

//Then attach the parameters during each iteration within the loop

https://jsfiddle.net/k5kagxju/

Answer 5

此解决方案在您的标记中需要两个额外的元素，我不是它的忠实粉丝，但符合您的要求。

＆＃34; Bla＆＃34; 文本需要管理＆＃34; OtherText＆＃34; 的宽度。通过将两个文本块放在inline-block元素中，包含元素的元素只会与最大的子元素一样宽，在本例中它是＆＃34; Bla＆＃34; 文本。第二个容器用于居中第一个包含元素。

<div class="container">
    <div class="alignment">
        <p>
            Bla Bla<br>
            Bla Bla Bla Bla Bla<br>
            Bla Bla Bla
        </p>
        <p>
            OtherText
        </p>
    </div>
</div>

.container,
.alignment {
    text-align: center;
}
.alignment {
    display: inline-block;
}
.container p:nth-of-type(2) {
    text-align: left;
}

如何将文本与居中文本的左侧对齐？

5 个答案: