如何在引导图像轮播中垂直对齐不同大小的数字

时间:2017-05-07 02:11:44

标签: html css image carousel figure

我正在慢慢开始激怒我的问题是我有一个包含不同宽度和高度的图像的图像轮播。为了便于解释,我已经为边框颜色指定了内联样式。我已经将所有东西水平对中,但是我现在正试图将绿色框的图形(图像和标题)垂直对齐到旋转木马内部,这是金盒子。目前所有的数字都是剪裁到旋转木马内部容器的顶部。

轮播的HTML如下所示:

.wraptocenter { 
display: table-cell;
text-align: center;    
vertical-align: middle;   
}

figcaption h4, figcaption p {
text-align:center;
padding: 0px 60px 0px 60px; 
}

div.item figure {
vertical-align:middle;
}

#mycarousel {
width:1100px;
height:1100px;
}

#mycarousel img {
max-width:850px;
max-height:850px;
width:auto;
height:auto;
}

我使用的CSS如下所示:

<ui-textbox v-model="userName"></ui-textbox>

我尝试使用#mycarousel图而不是图像,但它将图像吹到原来非常大的尺寸。如果有人能给我一些非常感激的指示。其余的轮播功能正常。

由于

0 个答案:

没有答案