Question

我无法让它发挥作用:(我只是试图将图像略微浮动在名称之上（半边，一半），但在center中。我在这里做错了吗？

＆＃13;

body {
  margin-top: 100px;
}
.box_info {
  display: inline-block;
  padding: 20px;
  min-width: 300px;
  background-color: #DDD;
  border-radius: 4px;
  text-align: center;
}
.box_info_name {
  display: block;
  font-size: 24px;
}
.box_info_logo {
  max-width: 100%;
  height: auto;
  position: absolute;
  text-align: center;
}
.box_info_name_inside {}

＆＃13;

<div class="box_info">
  <div class="box_info_name">
    <img src="http://placehold.it/150x150" class="box_info_logo">
    <div class="box_info_name_inside">Name</div>
  </div>
</div>

＆＃13;

这是一个小提琴：https://jsfiddle.net/ffxyc6d0/1/

Answer 1

如果图像是固定大小（不会动态变化），您可以将其定位为图像高度的一半的负边距，例如margin-top: -85px;（因为父容器上有20px的填充，所以需要额外关闭-10px以及半像高度）

以下示例：

body {
  margin-top: 100px;
}
.box_info {
  display: inline-block;
  padding: 20px;
  min-width: 300px;
  background-color: #DDD;
  border-radius: 4px;
  text-align: center;
}
.box_info_name {
  display: block;
  font-size: 24px;
}
.box_info_logo {
  display: inline-block;
  margin-top: -85px;
  max-width: 100%;
  height: auto;
  text-align: center;
}

<div class="box_info">
  <div class="box_info_name">
    <img src="http://placehold.it/150x150" class="box_info_logo">
    <div class="box_info_name_inside">Name</div>
  </div>
</div>

Answer 2

试试这一个：

＆＃13;

body{
  margin-top:100px;
}
.box_info{
    display: inline-block;
    padding: 20px;
    min-width: 300px;
    background-color: #DDD;
    border-radius: 4px;
    text-align:center;
 }
.box_info_name{
  display: block;
  font-size: 24px;
}
.box_info_logo{
    width: 150px;
    height: 150px;
    position: relative;
    bottom: 50px;
    text-align:center;
}
.box_info_name_inside{

}

＆＃13;

<body>
 <div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
</body>

＆＃13;

Answer 3

您也可以使用flexbox：）

body{
  margin-top:100px;
}
.box_info{
  background: #ccc;
 }
.box_info_name{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 24px;
}
.box_info_logo{
  position: relative;
  margin-top: -75px;  
}

<div class="box_info">

<div class="box_info_name">

<img src="http://placehold.it/150x150/fff" class="box_info_logo">

<div class="box_info_name_inside">Name</div>

</div>

</div>

Answer 4

我喜欢在框外提供＆＃39;回答这样的问题，而不使用javascript必须改变所有的边距会变得有点烦人。所以我用另一种方式解决了这个问题。而不是移动页面周围的一切，为什么不只是使背景的一部分透明。

＆＃13;

.box_info {
  display: inline-block;
  padding: 20px;
  min-width: 300px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px);
  border-radius: 4px;
  text-align: center;
}
.box_info_name {
  display: block;
  font-size: 24px;
}
.box_info_logo {
  text-align: center;
}
.box_info_name_inside {}

＆＃13;

<div class="box_info">
  <div class="box_info_name">
    <img src="http://placehold.it/150" class="box_info_logo">
    <div class="box_info_name_inside">Name</div>
  </div>
</div>

<div class="box_info">
  <div class="box_info_name">
    <img width="150px" src="https://lh4.googleusercontent.com/-1rv6qW3mpvA/AAAAAAAAAAI/AAAAAAAAS3M/xq0SSZzrgVg/photo.jpg" class="box_info_logo">
    <div class="box_info_name_inside">Andrew Bone</div>
  </div>
</div>

＆＃13;

我已经使用background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px);在95px应该#DDD之后说出任何内容，之后需要保持透明。

95px是图像的高度（150px）除以2（75px）加上外框的填充（20px）。

如果图像大小保持不变，那就太好了，如果你计划改变它，那么我们可能需要考虑添加一些小的javascript。

IE6不支持

线性渐变，但在现代IE以及Edge，Chrome和Firefox中都是如此。

我希望你觉得这很有用。

Answer 5

我不确定我是否正确理解了你的问题，但也许这就是你想要的。

我只是从position: absolute课程中删除了.box_info_logo。

像这样：

body{
  margin-top:100px;
}
.box_info{
    display: inline-block;
    padding: 20px;
    min-width: 300px;
    background-color: #DDD;
    border-radius: 4px;
    text-align:center;
 }
.box_info_name{
  display: block;
  font-size: 24px;
}
.box_info_logo{
    max-width: 100%;
    height: auto;
    text-align:center;
}
.box_info_name_inside{
  
}

<div class="box_info">
  <div class="box_info_name">
    <img src="http://placehold.it/150x150" class="box_info_logo">
    <div class="box_info_name_inside">Name</div>
  </div>
</div>

Answer 6

要使.box_info与jsfiddle示例中的position: relative大小相同，您可以将.box_info_logo添加到此类，同时将position: absolute保留为body { margin-top: 150px; } .box_info { display: inline-block; padding: 20px; min-width: 300px; background-color: #DDD; border-radius: 4px; text-align: center; position: relative; } .box_info_name { display: block; font-size: 24px; } .box_info_logo { max-width: 100%; height: auto; position: absolute; text-align: center; left: 0; right: 0; margin: auto; bottom: 50px; } .box_info_name_inside {}。

<div class="box_info">

  <div class="box_info_name">

    <img src="http://placehold.it/150x150" class="box_info_logo">

    <div class="box_info_name_inside">Name</div>

  </div>

</div>

Call SetClipboard("Clipboard this text")

如何将图像精确地浮动到框内文本的中心？

6 个答案: