Question

我想在图像上使用中心垂直引导按钮，我这样做：

 mysqld_safe Can't log to error log and syslog at the same time.  Remove all --log-error configuration options for --syslog to take effect.
151130 18:17:51 mysqld_safe Logging to '/var/log/mysql/error.log'.
151130 18:17:51 mysqld_safe A mysqld process already exists

我使用http://jsfiddle.net/fhd031hf/，是真的还是有另一种更好的方法？

Answer 1

您看到的方法可行，但您可以/应该使用位置相对和绝对样式。当其他人或你自己不得不再次查看代码时，它们会更直观。

要获得所需的结果，您必须将 position：relative 添加到包含div和位置：absolute;顶部：200px ;按钮。

<div style="position: relative">
  <img style="width:100% ; height:400px;" class="center-block img-responsive" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" />
  <button style="position: absolute; top: 200px" type="button" class="btn btn-default ">TitleText</button>
</div>

http://jsfiddle.net/fhd031hf/2/

修改看到您正在为图像使用响应式类，请考虑当屏幕解决方案小于原始图像时，两个appproaches都会破坏设计。

Answer 2

我注意到你的小提琴的一些事情：

1。）你没有正确地提供自助资源。你有.css文件资源，但你错过了.js文件。

2。）你的div结构绝不表示你使用的是bootstrap。 Bootstrap具有必须属于div的类，以使引导程序正常工作。这是一个使用bootstrap的入门链接。 Bootstrap Getting Started

看看我为你做的这个小提琴。我没有使用html img标签，而是使用带背景图像的div。将该div设置为相对位置并将该div内的按钮设置为绝对位置，无论屏幕分辨率如何，它都允许按钮完全保留在图像的中心。

唯一的缺点是你需要指定按钮的高度。除此之外，我一直使用这种方法，并没有给我任何问题。

jsfiddle

    .center-block.img-responsive {
        background: url('http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg') no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position: relative;
        height: 500px;
    }
    .btn.btn-default {
        position: absolute;
        width: 100px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40px;
        margin: auto;
    }

中心垂直引导按钮怎么样？

2 个答案: