Question

我在页面上有一个动态创建的标题。有时，它的两侧有左右按钮，有时只有左或右，有时没有。

有没有办法将主要文本居中并在旁边添加其他元素时保持居中？目前，当我添加左/右按钮时，整个组件居中。如果我只添加一个按钮，整个事情就会转移到一边。

如何保持主要元素居中但在其周围添加其他元素？

这很好用：

<h1>
  <img src="left.png" />
  Main Title
  <img src="right.png" />
</h1>

这不起作用：

<h1>
  <img src="left.png" />
  Main Title
</h1>

Answer 1

我发现了一个问题的答案，未来任何人都会发现这个帖子。

将元素保留在标记（HTML）中，但使用CSS将其设置为visibility: hidden而不是display: none。这样可以保留页面上的格式，但不会呈现要查看的对象。

visibility: hidden 非display: none

阅读this文章了解更多信息......

Answer 2

这可能是一个解决方案：

<!doctype html>
<html>
<head>
<title>Select Test</title>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    #header {
        width: 100%;
        position: fixed;
        left: 0px;
        top: 0px;
    }

    h1 {
        text-align: center;
        width: auto;
        line-height: 53px;
    }

    .left {
        position: fixed;
        top: 5px;
        left: 5px;
    }

    .right {
        position: fixed;
        top: 5px;
        right: 5px;
    }

</style>
</head>

<body>
<div id="header">
<img class="left" src="http://files.softicons.com/download/internet-icons/user-icons-by-2shi/png/48/user1.png" />
<h1>My Title</h1>
<img class="right" src="http://files.softicons.com/download/internet-icons/user-icons-by-2shi/png/48/user1.png" />
</div>
</body>

</html>

但你可以找到更多。尝试删除右侧或左侧的img，标题应保持居中。

P.S。如果您不想要固定标题，请将#header更改为

#header {
        width: 100%;
        margin-top: 0px;
        margin-left: 0px;
    }

在不改变对齐的情况下向中心元素的边添加元素

2 个答案: