Question

以下是我的例子：

n = 10240
iter = 10

tf.reset_default_graph()
graph = tf.Graph()
with graph.as_default():
    with tf.device("/gpu:0"):
        matrix1 = tf.placeholder(tf.float32, [n, n], name="Matrix_One")
        matrix2 = tf.placeholder(tf.float32, [n, n], name="Matrix_Two")
        product = tf.matmul(matrix1, matrix2, name = "Matrix_Multiply")

date = datetime.now()
cwd = os.getcwd()
LogBase = cwd + "/benchmarks2/"
LogPath = LogBase + date.strftime("%Y%m%d-%H%M%S") + "/"
print(LogPath)

with tf.Session(graph=graph) as session:
    tf.global_variables_initializer().run()

    run_options = tf.RunOptions(trace_level=tf.RunOptions.FULL_TRACE)
    run_metadata = tf.RunMetadata()

    writer = tf.summary.FileWriter(LogPath, session.graph)
    for i in range(iter):
        m1 = np.random.rand(n, n)
        m2 = np.random.rand(n, n)
        feed_dict = { matrix1 : m1,matrix2 : m2}
        p = session.run( [product], feed_dict=feed_dict, options=run_options, run_metadata=run_metadata)
        writer.add_run_metadata(run_metadata, 'step%2d' % i)

    tf.summary.FileWriter(LogPath, graph).close()

body {
  padding: 50px;
}

div {
  width: 240px;
  height: 150px;
  border: 1px solid #ccc;
  position: relative;
}

a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

我想使用<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div> <a href="">Lorem ipsum dolor sit.</a> </div> </body> </html>将我的绝对定位文本放在块中，但我的文本有换行符。显然，我的块有足够的空间放置在一行文本中。我不确定，但可能有办法解决这个问题？

Answer 1

尝试添加

a { white-space: nowrap; }

它应该保持为1行。

你也可以摆脱所有这些定位：只需a {line-height: 150px;}并将text-align: center;添加到div：

body {
  padding: 50px;
}

div {
  width: 240px;
  height: 150px;
  border: 1px solid #ccc;
  text-align: center;
}

a {
  line-height: 150px;
}

  <div>
    <a href="">Lorem ipsum dolor sit.</a>
  </div>

Answer 2

left: 50%导致a元素只有50％的宽度，即父元素的50％，因为它从中间开始并延伸到右边框。所以它的内容包装在你的情况下，因为它们不能适应50％的宽度。

我建议使用另一种解决方案，其中flexbox可以实现居中（实际上会减少CSS）：

＆＃13;

body {
  padding: 50px;
}

div {
  width: 240px;
  height: 150px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div>
    <a href="">Lorem ipsum dolor sit.</a>
  </div>
</body>

</html>

＆＃13;

Answer 3

您可以使用CSS flexbox模块。您只需将包含元素设置为display: flex，然后使用align-items和justify-content属性设置内容的对齐方式。在这种情况下，a元素不需要任何特殊样式。这是一个不错的flexbox guide。

＆＃13;

body {
  padding: 50px;
}

div {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 240px;
  height: 150px;
  padding: 1em;
  border: 1px solid #ccc;
  position: relative;
}

＆＃13;

<body>
  <div>
    <a href="#">The content is centered in the flex box no matter how many lines of text you have.</a>
  </div>
</body>

＆＃13;

中心绝对块与变换：平移（-50％， - 50％）方式问题

3 个答案: