Question

我只想知道为什么text-align: right没有将svg向右移动？它正在向右移动按钮。我需要svg坐在右侧按钮上方。

svg {
    display: block
}

polygon {
    fill: red;
}

.main {
    width: 100%;
    background-color: green;
    text-align: right;
}

<div class="main">
    <svg height="20" width="20">
        <polygon points="10,0 20,20 0,20"/>
    </svg>
    <button>Test</button>
</div>

Answer 1

这是因为您将SVG作为块级元素。块不文本对齐。您可以将其正确浮动，也可以只是将其显示：inline-block。见下文。

svg {
    display: inline-block
}

polygon {
    fill: red;
}

.main {
    width: 100%;
    background-color: green;
    text-align: right;
}

<div class="main">
    <svg height="20" width="20">
        <polygon points="10,0 20,20 0,20"/>
    </svg>
    <div>
    <button>Test</button>
    </div>
</div>

编辑：您可以将按钮包装在div（块级元素）中。另外，您也可以在两个元素之间插入换行符（br）。

Answer 2

svg没有向右移动，因为您将任何文本右对齐，而不是将svg设置为display：Block而不是display：inline-block;

尝试：

float: right;

在svg上。

Answer 3

编辑完帖子后，您希望两个对象都位于彼此上方的右侧，因此我在其周围添加了一个额外的div。该div将float:right;表示这将位于页面的右侧。

div中的所有内容都将位于彼此之间。

.right-section { float:right; }

svg { margin-left:10px; display:block; }

polygon {
    fill: red;
}

.main {
    width: 100%;
    background-color: green;
    text-align: right;
}

<div class="main">
    <div class="right-section">
      <svg height="20" width="20">
          <polygon points="10,0 20,20 0,20"/>
      </svg>
      <button>Test</button>
    </div>
</div>

我还向margin-left:10px;添加了svg { }，以确保箭头位于按钮的中心。

Answer 4

@Eric向您很好地解释了为什么SVG没有向右移动。解决您问题的另一种方法是使用flexbox。

/*svg {
    display: block
}*/

polygon {
    fill: red;
}

.main {
    width: 100%;
    background-color: green;

    /* I added only these rules */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/*svg {
    display: block
}*/

polygon {
    fill: red;
}

.main {
    width: 100%;
    background-color: green;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

<div class="main">
    <svg height="20" width="20">
        <polygon points="10,0 20,20 0,20"/>
    </svg>
    <button>Test</button>
</div>

如何在div中文本对齐svg元素

4 个答案: