Question

我想在项目中解决的问题：

我希望导航栏中链接的选定状态为小图标。

我希望该图标直接位于导航栏链接文本的下方和中间。

我似乎无法弄明白。

我在下面的项目中模仿了一些css。

基本上我试图让文本“尽力而为”以父母的中间为中心“将我的文本置于我的亲戚中心”。

我们所有的导航链接都是内联的，所以我不想改变内嵌的标记。

https://jsfiddle.net/6Lk1uqs8/5/

这里是小提琴中的代码：

<a href="#">
  center the text below me relative to me
  <div>
    trying ma best
  </div>
</a>

a {
  display: inline;
}

div {
  display: inline;
  position: relative;
  top: 15px;
  right: 50px;
}

非常感谢任何帮助。

Answer 1

您可以使用relative和absolute位置来获得所需的结果。

a {
 display:inline;
 position:relative;
}

div {
  position: absolute;
  top: 15px;
  width:100%; /* instead of this you can use left:0; right:0 also */
  text-align:center;
}

a {
  display:inline;
  position:relative;
  }

div {
  position: absolute;
  top: 15px;
  width:100%;
  text-align:center;
}

<a href="#">
  center the text below me relative to me
  <div>
    centere insdff
  </div>
</a>

Answer 2

您可以使用 Flexbox 轻松完成：

＆＃13;

<a href="#">
  center the text below me relative to me
  <div>
    trying ma best
  </div>
</a>

＆＃13;

def array_request_example(input_array):
    input_array = input_array.astype(np.float32)
    return input_array.tostring()

byte_string = tf.placeholder(dtype=tf.string)
audio_samples = tf.decode_raw(byte_string, tf.float32)

audio_array = np.array([1, 2, 3, 4])
bstring = array_request_example(audio_array)
fdict = {byte_string: bstring}
with tf.Session() as sess:
    tf_samples = sess.run([audio_samples], feed_dict=fdict)

＆＃13;

Answer 3

不是完全证明，但可能是一个很好的起点。 https://jsfiddle.net/p1er4t2p/

a {
  display: inline-block;
  border:1px solid black;
}

a:after {
  visibility:hidden;
  content:'center';
  display: inline-block;
  position: relative;
  display:flex;
  justify-content:center;
  border:1px solid blue;
}

a:hover::after{
  visibility:visible;
}


<a href="#">
  center the text below me relative to me
</a>

Answer 4

您可以执行以下css

a {
    display: inline;
    position: relative;
}
a div {
    display: inline;
    position: absolute;
    top: 15px;
    width:100%;
    text-align:center;
}

PS：div标记内anchor不是好方法 Is putting a div inside an anchor ever correct?

文本

4 个答案: