代码之家 › 专栏 › 技术社区 › swinn

在动态宽度容器中将内联内容居中,该容器太薄

css3 css html

swinn · 技术社区 · 6 年前

假设我有一个260px宽的图像。它在一个容器里,不管什么原因,它只有200px宽。它自然会像这样出现:

已将虚线边框添加到容器中以使其可见,并使图像稍微透明。如您所见,图像从容器右侧溢出。但我该怎么做才能做到这一点呢?

不管容器有多薄,图像应该从两侧均匀溢出,并保持居中。我要求无论容器的宽度如何,图像都要这样做,因为它是动态调整大小的。

文本也应如此:

请只用HTML和CSS。以下是我的资料。

HTML

<div class=“container”>
<img src=“https://cdn4.buysellads.net/uu/1/6167/1530364713-1527799204-pink_logo.png”>
</DIV>

<br><br>

<div class=“container”>
<P>
此文本对容器来说太长了一点
</p>
</DIV>
CSS

body{
左边距:3em;



















<div class="container">
    <img src="https://cdn4.buysellads.net/uu/1/6167/1530364713-1527799204-pink_logo.png">
</div>

<br><br>

<div class="container">
    <p>
        This text is a little too long for the container
    </p>
</div>




body {
    margin-left: 3em;
}

img {
    opacity: 0.5;
}

.container {
    border: 1px dashed black;
    width: 200px;
    white-space: nowrap;
}


jsFiddle

caniuse.com

3 回复 | 直到 6 年前

lioxo 6 年前

只需使用CSS flexbox!您可以告诉容器它应该将其内容居中,这将导致内容左右溢出。那就把溢出物藏起来,瞧!

对于文本,如果您真的希望它溢出其容器,还必须防止它被破坏。

例如,请看下面的代码片段。

.container {
  border: 5px solid lightgrey;
  width: 200px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
}

<div class="container">
  <img src="https://picsum.photos/260">
</div>
<div class="container">
  <span>This is really long text. It should not break and overflow its container left and right, for it is wider</span>
</div>

Johannes 6 年前

1.)应用 position: relative 到容器。

2.)将以下CSS应用于图像或内容分区:

#my_image {
  display: block;
  width: 260px; /* whatever value, but fixed width */
  height: 180px; /* whatever value, but fixed height */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这是水平和垂直地将一个元素居中放置在另一个元素中的标准方法,如果容器比元素本身小的话,这种方法也可以工作。

下面是一个例子(注意我应用了 overflow: hidden 到容器以隐藏超出容器边界的部分):

.container {
  position: relative;
  width: 180px;
  height: 120px;
  border: 1px solid red;
  overflow: hidden;
}

#my_image {
  display: block;
  width: 260px;
  /* whatever value, but fixed width */
  height: 180px;
  /* whatever value, but fixed height */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <img src="http://placehold.it/400x300" id="my_image">
</div>

Rdza Rust 6 年前

.flex-container {
   background-color: red;
   width: 200px;
   height: 100px;
   margin: auto;
   position: relative;
   
}

.flex-container > img {
   opacity: 0.7;
   position: absolute;
   left: -25%;
   width: 150%;
}

<div class="flex-container">
  <img height="auto" src="https://picsum.photos/260">
</div>