相关疑难解决方法(0)

请在下面链接中找到

http://jsfiddle.net/anglimass/Y8AvM/

我只想要我的div来垂直对齐中间ie7.

有人可以帮忙吗？

谢谢

对不起大家,

我找到了一个很好的解决方案请参见下面的链接,

http://jsfiddle.net/anglimass/ct4tx/

谢谢,

参考:http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizo​​ntally-and-vertically/

比我愿意承认试图让图像的一行是在一个可点击的链接，我花更多的时间row是在对齐的中间的图像row是不破引导响应。链接工作正常，但是由于图像尺寸的变化（尽管它们都是紧凑高度的景观），对齐方式仍然不正确。我可以使图像在中垂直对齐div.row，但是这样会破坏响应速度，并且图像的尺寸不能正确调整。

这是我尝试过的JSFiddle

这是我想做的事情：

row
--------------------------------------------------------
                  |                  |                  
      image1      |      image2      |      image3      
                  |                  |                  
--------------------------------------------------------

这是我能想到的最好的方法：

row
--------------------------------------------------------
      image1      |      image2      |      image3      
                  |      image2      |      image3      
                  |      image2      |            
--------------------------------------------------------

这个答案正是我要达到的目的，但是当我使用CSS类时，图像在我眼中并不是垂直居中的。

我在Bootstrap项目中得到的图像都是紧凑的风景图像。尝试在行内垂直对齐图像

我尝试过的

这是我开始的：

<div class="row vertical-align">
    <div class="col-sm-4">
        <a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
    </div>
    <div class="col-sm-4">
        <a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
    </div>
    <div class="col-sm-4">
        <a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
    </div>    
</div>

我可以使所有内容作为可单击的链接显示在一行中，但是由于图像尺寸的细微变化，图像无法在行的垂直中心对齐。我vertical-align在正常屏幕上添加了此内容，但是在调整窗口大小时，它破坏了Bootstrap的响应能力。

.vertical-align {
    display: flex;
    align-items: …

在这个答案之后我尝试垂直居中我的header元素,但是我遇到了麻烦,因为container中间有一个元素可以确保它们包含在某个max-width中心内.我应用于display: table-cell这个元素,现在它max-width不起作用(占据整个屏幕宽度,无论它max-width).如何解决这个问题呢？

标记:

<header class="banner">
  <div class="container">
    <a class="header__branding" href="<?php bloginfo( "wpurl" ); ?>">
      <img src="<?php bloginfo( "template_url" ); ?>/dist/images/baia_logo.svg" />
    </a> 
    <nav class="nav_primary">
      <?php wp_nav_menu( array( 'menu' => 'main menu' ) ); ?>
    </nav>
  </div>
</header>

CSS:

.banner {
    height: 160px;
    width: 100%;
    display: table;
    background: url(../images/header.jpg) 50% 50% repeat-x;
}
.container {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    vertical-align: middle;
    display: table-cell; …

我在WordPress博客的小部件中放置了图片。我希望图像居中，因为它比放置的侧边栏小。

我目前使用以下代码：

<img style="display: block; margin-left: auto; margin-right: auto; padding-bottom: 10px; width: 150px; height: 155px;" src="path">

但是图像向左对齐。

我究竟做错了什么？

非常感谢！

我想知道是否可以使用 CSS 中的 align=middle 样式而不是 html 来对齐图片。

<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Smiley.png/50px-Smiley.png" align="middle" />Text!

我目前正在使用 CSS 裁剪图像，如下所示：

<div class="crop">
    <img src="image.png" alt="">
</div>

.crop {
width: 150px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 150px;
height: auto;
margin: 0 0 0 0;
}

这样，它会水平对齐容器内的图像。但是，我不知道如何在中心垂直对齐图像（所以它就在中间）。有什么帮助吗？

我有一个高度为100vh的div,因此它始终是浏览器屏幕的高度.在这个div的内部,我想放置一个图像并将其垂直于其父级.

高度是可变的,所以我不能使用固定的边距.我目前的标记如下:

HTML

   <div class="textportfolio">

      <h1>This is a title</h1>

      <p class="textbio-small">
      The Roosevelt dime is the current ten-cent piece of the United States.
      </p>

      <img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">

   </div>

CSS:

.textportfolio {
    font-family: "Lora", serif;
    margin: 5%;
    background: #e9cca3;
    height: 100vh;
}

img.portfolio-slides-img {
    max-width: 40%;
    max-height: 40%;
    margin: 0 auto;
    display: block;
    }

有人知道如何根据浏览器高度垂直居中图像吗？

这是代码片段

.textportfolio {
    font-family: "Lora", serif;
    margin: 5%;
    background: #e9cca3;
    height: 100vh
}

img.portfolio-slides-img {
    margin-top: 15%;
    max-width: 40%;
    max-height: 40%;
    margin: 0 auto;
    display: block; …

我试图将包含在显示设置为表格的 div 中的图像居中。在其中，我希望显示一个图像，该图像应位于垂直和水平方向的中心。我已经使用 margin:auto 实现了水平位置，并将其设置为 display: table-cell，但它没有垂直居中。任何帮助都会很棒

.overlay { height: 50%; background: red;position: fixed;
top: 0;
left: 0;
height: 50%;
width: 100%;
display: table;}
.swipe {height: 80px;
display: table-cell;
margin: auto;}

<div style="height:300px">
<div class="overlay">
   <img class="swipe" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />

<th>Cars <i class="fa fa-sort-asc pull-right"></i></th>

当我使用bootstrap的pull-right类时，它会将我中的图标与th右上角pull-right对齐，而删除则使图标在垂直方向上居中于左侧，但是有一种方法可以使我在使用bootstrap 时在我pull-right的居中位置中向右垂直对齐吗？

我正在使用fontawesome的引导程序和图标