Question

我想在.net页面上显示图像，我从数据库加载（因此数量可能会有所不同）。所有图像的宽度和高度分别不同，分别为130px和60px。我想将图像放入容器元素中，其固定宽度为130px，固定高度为60px。图像应垂直和水平居中。如果可能，容器元件应水平对齐。

我尝试了 div （使用浮动）和 span 。使用div，我得到固定的大小，但不能使图像居中。有了span，我可以居中，但不设置任何尺寸。如果我将span放入div，它似乎表现得像div（中心被忽略）。

Answer 1

您可以在http://jsfiddle.net/km5dk/8/

上看到它有用

但我觉得你搜索的是这样的东西。

### HTML ###


    <div id="container">
        <div class="image-container">
            <img src="#" alt="A image" />
        </div>
    </div>


    ### CSS ###

    #container {
        width: 130px;
        height: 60px;
        display: table;
        background-color: #ccc;         
    }

    #container .image-container {
        text-align: center;
        vertical-align: middle;
        display: table-cell;
    }

    #container .image-container img {
        max-width: 160px;
        max-height: 60px;        
    }

Answer 2

制作影像中心

.image-container {
    width: 500px;
    height: 500px;
    position: relative;
}

.image-container img {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto auto;
}

自动调整图像大小以适合div容器

.image-container img {
    max-height: 100%;
    max-width: 100%;
}

Answer 3

在盒子外面思考一下（原谅故意的双关语！）你可以在容器的CSS规则上使用background-size，并在单个容器本身上使用background-image: url(this_image.jpg);作为内联样式。这将在更小更整洁的包中处理所有缩放。

设置background-size: cover;会缩放图像以使最小尺寸匹配（尽管可能会有一些裁剪），background-size: contain;可确保整个图像适合。

这是另一种选择......

丹尼

Answer 4

使用定位。以下对我有用：

<ul class="nav navbar-nav">
    <li><a href="#" class="active" ><span class="button hvr-pop glyphicon glyphicon-home" > </span>AVALEHT</a></li>
    <li><a href="#about "><span class="button hvr-pop glyphicon glyphicon-heart" > </span>MINU TÖÖD </a></li>
    <li><a href="#contact"><span class="button hvr-pop glyphicon glyphicon-user" > </span>MINUST</a></li>
    <li><a href="#contact"><span class="button hvr-pop glyphicon glyphicon-envelope" > </span>KONTAKT</a></li>
</ul>

.navigatsioon .navbar-default .navbar-nav>li>a:hover + .hvr.pop{
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position:absolute;
}

Answer 5

如果你在div中有一个IMG标签，请在div css上使用margin：0px auto;

垂直：

显示：table-cell; vertical-align：middle;

Answer 6

我还在学习自己两周前开始做HTML / CSS，但这似乎工作得很好，有悬停，点击，描述框，标题框和居中图像。

您也可以将CSS代码放在单独的样式表中。我以为我会把他们留在一起担任这个职位。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
       background-color:black;
       color:white;
    }
    #container
    {
         width:18em;
         height:18em;
    }
    #title-image
    {
         background-image:url('http://www.gravatar.com/avatar/cd1954c9caf7ffc02ab18137967c4bc9?s=32&d=identicon&r=PG');
         background-repeat:no-repeat;
         background-position:center;
         border:1px solid RGBa(255, 255, 255, 0.1);
         background-color:RGBa(127, 127, 127, 0.1);
         color:#CFCFCF;
         width:10em;
         height:10em;
         margin-left: 3.9375em;
         margin-right: 4em;
         text-align:center;
         display: block;
    }
    #title-image:hover
    {
         border:1px solid RGBa(255, 255, 255, 0.15);
         background-color:RGBa(127, 127, 127, 0.15);
         color:#FFFFFF;
    }
    #description
    {
         width: 18em;
         border:1px solid RGBa(255, 255, 255, 0.03);
         background-color:RGBa(127, 127, 127, 0.03);
         text-align:center;
         display: block;
    }
</style>
</head>
<body>
<div id="container">
    <a href="google.com" id="title-image">This is your Title?</a>
    <p id="description">Your description<br>Can go here.</p>
</div>
</body>
</html>

Answer 7

使用Bootstrap 3，您可以添加一个img-responsive中心块类来居中图像

<img class="img-responsive center-block" src="my_image.png" />

Answer 8

李斯特先生：恕我直言，对于垂直，您必须将 display: table; 添加到 d parent 和特定高度，例如：

.parent {
   display: table;
   height: 100vh;
   position: fixed;
}
.parent .child {
   display: table-cell;
   vertical-align: middle;
}

具有固定大小的容器元素中的中心图像（CSS，HTML）

8 个答案: