Question

我在div中有两个附加了text-align: center;的标签。问题是我试图使其中一个居中在同一条线上，而另一个在其旁边，则在右边。发生的事情是它们既共享中心空间，又左右平等地走。可悲的是，我无法删除text-align：center;而且我无法确定两个标签的宽度。

这是一个codepen示例：https://codepen.io/darrow8/pen/ZgYWrw

Answer 1

尝试此代码将为您提供帮助。

button {
  float: right;
  margin: 20px 20px 0 0;
}

Answer 2

您要尝试这样的事情吗？

<div style="background-color:grey;text-align: center; position: relative">
  <h4 style="display:block">CENTERED</h4>
  <button style="position:relative; left: 50px;">LEANING RIGHT</button>
</div>

Answer 3

要执行此操作，必须使用inline-block元素包装两个包装，以确保包装纸不会占用其父包装纸的整个宽度。根据需要调整translate()的值。另一个用于比较

.wrapper {
  background-color: pink;
  display: inline-block;
  transform: translate(25%, 0);
}

<div style="background-color:grey;text-align: center;">
  <div class="wrapper">
    <h4 style="display:inline-block">CENTERED </h4>
    <button>LEANING RIGHT</button>
  </div>
</div>
<br/>
<br/>
<br/>
<div style="background-color:grey;text-align: center;">
  <h4 style="display:inline-block">CENTERED </h4>
</div>

Answer 4

您必须为标签（包含一些文本）赋予y属性，然后为#include <iostream> class Base { protected: int x; int y; int z; public: Base(void) : x(0) {} }; /* — — — — — — — — — — — — — — — — — — — — */ class Father : public virtual Base { public: Father(void) : Base() { y = 1; z = 1; } }; /* — — — — — — — — — — — — — — — — — — — — */ class Mother : public virtual Base { public: Mother(void) : Base() { y = 2; z = 2; } }; /* — — — — — — — — — — — — — — — — — — — — */ class Child : public Mother, public Father { public: Child(void) : Base() { y = Father::y; z = Mother::z; } int getX() { return x; }; int getY() { return y; }; int getZ() { return z; }; }; /* — — — — — — — — — — — — — — — — — — — — */ int main() { Child newborn; std::cout << newborn.getX() << std::endl << newborn.getY() << std::endl << newborn.getZ() << std::endl; return (0); } /* — — — — — — — — — — — — — — — — — — — — */属性赋予与设置的Output: 0 1 1 ——— VS ——— Desired Output: 0 1 2属性相同的值。参见示例打击：

height

Answer 5

尝试这种简短的方法，使用flexbox和绝对位置。

HTML

<div class="wrapper">
  <h4>CENTERED </h4>
  <button>LEANING RIGHT</button>
</div>

CSS

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: grey;
  position: relative;
 }

button{
  position: absolute;
  right: 10px;
}

Screenshot of code in working

在Codepen上结帐的演示 https://codepen.io/junaydk/full/YmPWJL

如何防止一个标签干扰另一个标签的居中

5 个答案: