Question

我有一个H1，以及需要追踪它的链接（实际上是一个图像链接，但我在下面的示例中使用文本来简化代码）

我想要的是链接在H1之后出现在同一行上，但是H1保持在其中心，包含div。

现在，该链接将标题从中心移位......

这是我拥有的

<div id="container">
    <h1>Hello World</h1>&nbsp;<a id="gear" href="/aaa">Long text so you can see the displacement</a>
</div>

#container {
     width: 400px;
     text-align: center;
     background-color: pink;
}

#container h1 {
    display: inline-block;
}

同样的小提琴：http://jsfiddle.net/7xzq60x4/

在图片中：

现在： **** HEADER TEXTlink ****

我想要的： ****** HEADER TEXTlink **

提前致谢

Answer 1

这是你想要的吗？

#container {
  width: 400px;
  text-align: center;
  background-color: pink;
  position: relative;
}

#container h1 {
  display: inline-block;
}

#container span {
  position: absolute;
  right: -75px;
  top: 65%;
}

<div id="container">
  <h1>Hello World</h1><span><a id="gear" href="/aaa">Long text so you can see the displacement</a></span>
</div>

小提琴：http://jsfiddle.net/7xzq60x4/2/

你可能想要的东西......

#container {
  width: 400px;
  text-align: center;
  background-color: pink;
  position: relative;
}

#container h1 {
  display: inline-block;
}

#container span {
  position: absolute;
  right: 25px;
  top: 35%;
}

<div id="container">
  <h1>Hello World</h1><span><a id="gear" href="/aaa">Small Text</a></span>
</div>

Answer 2

你可以使用flex属性+一个伪元素：http://jsfiddle.net/7xzq60x4/8/

＆＃13;

#container {
    width: 400px;
    text-align: center;
    background-color: pink;
    display:flex;
}
#container a {
    text-align:left;
}
#container:before {
    content:'';
}
#container h1 {
    white-space:nowrap;/* if this is what you 'd like */
}
#container h1 , #container a, #container:before{
    flex:1;
    margin:auto;
}

＆＃13;

<div id="container">
    <h1>Hello World</h1> <a id="gear" href="/aaa">Long text so you can see the displacement</a>
</div>

＆＃13;

或表格布局http://jsfiddle.net/7xzq60x4/9/

＆＃13;

#container {
    width: 400px;
    text-align: center;
    background-color: pink;
    display:table;
    table-layout:fixed;
}
#container a {
    text-align:left;
}
#container:before {
    content:'';
}

#container h1, #container a, #container:before {
    display:table-cell;
    vertical-align:middle;
}

＆＃13;

<div id="container">
     <h1>Hello World</h1>  <a id="gear" href="/aaa">Long text so you can see the displacement</a>

</div>

＆＃13;

Answer 3

如果您对使用flexbox感到满意，可以很容易地实现这一点。这将需要一些前缀来符合所有浏览器，并且可能不会回到支持IE9。

＆＃13;

#container {
     /* Use flexbox. */
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* Tells flexbox to place all items on a single line. */
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    /* Lastly tells flexbox to ensure all items are aligned on the center. */
    align-items: center;

    width: 400px;
    text-align: center;
    background-color: pink;
}

＆＃13;

<div id="container">
    <h1>Hello World</h1>
    <a id="gear" href="/aaa">Long text so you can see the displacement</a>
</div>

＆＃13;

有关详细信息，请尝试this quick guide。

如何在h1之后添加文本但保持h1居中

3 个答案: