Question

我有一个图库页面。我有预设宽度的图块。一些图像恰好适合它，另一些图像太宽并且设置为宽度100％。我想将图像居中放置在瓷砖中，这样它的顶部和底部就会有黑条

HTML：

<figure class="gallery-tile">
    <img src="images/gallery/lulBBQ.JPG" class="gallery-tile-image">
    <figcaption class="gallery-tile-description">
        Sample Text.
    </figcaption>
</figure>

CSS：

.gallery-tile{
    display: block;
    position: relative;
    overflow: hidden;
    float:left;
    width: var(--halfwebpageWidth);
    height: 640px;
    background-color: black;
    margin: auto;
}

.gallery-tile-image{
    display: block;
    overflow: hidden;
    width: var(--halfwebpageWidth);
    margin: auto;
    vertical-align: middle;
}

Answer 1

使用display：flex将内容垂直居中对齐

.gallery-tile {
  position: relative;
  overflow: hidden;
  float: left;
  width: var(--halfwebpageWidth);
  height: 640px;
  background-color: black;
  margin: auto;
  display: flex;
  align-items: center;
}

.gallery-tile-image {
  display: block;
  overflow: hidden;
  width: var(--halfwebpageWidth);
  margin: auto;
  vertical-align: middle;
}

<figure class="gallery-tile">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqrfVof7CYYRtsdCu1VD4AWoPB2gs25PP5hQAuhOwhZngrOhsS" class="gallery-tile-image">
  <figcaption class="gallery-tile-description">
    Sample Text.
  </figcaption>
</figure>

Answer 2

根据需要设置height，with和line-height属性。

    DELIMITER //
CREATE PROCEDURE MedianSalary(OUT median INT)
BEGIN

DECLARE counter int(5) DEFAULT 0;
DECLARE set_size int(5) DEFAULT (SELECT count(*) from employee);
DECLARE median_index int(5) DEFAULT (SELECT floor(count/2));


DECLARE all_salaries CURSOR

FOR SELECT salary from employee,
OPEN all_salaries;

WHILE @counter != @median_index
BEGIN
 SET @counter = @counter + 1,
 FETCH NEXT from all_salaries,
END;

FETCH all_salaries INTO median;

CLOSE all_salaries;

END //
DELIMITER ;

figure {
width: 400px;
height: 300px;
line-height:300px;
text-align: center;
border:1px solid red;
}
figure img {
vertical-align: middle;
max-height:250px;
}
figcaption{
line-height:20px;
height:20px;
margin-top:10px;
}

将<img/>放在<figure>中

2 个答案: