在表中响应图像的居中

时间：2015-06-05 03:07:42

标签： javascript css

在响应式table中，我希望左列（25％）包含一个单元格table，边距为＆＃34; 1vw 2vw 1vw 2vw＆＃34;或其父元素的适当填充。 table将包含任意大小的image（均大于或小于下面的限制），它应在其父table中垂直和水平居中。 image（或其上方的table）的最大大小应为200px，最小大小为64px。此外，image元素的直接父级应为figure元素，并且figcaption为兄弟。

什么CSS会以响应的方式设计这个结构？

<table border=1>
    <TR><TD COLSPAN=6 STYLE="border-bottom: medium solid gray;">&nbsp;</TD></TR>
    <tr>
        <td style="width: 25%; background-color: cyan;">
            <table border=2 style="margin: 1vw 2vw 1vw 2vw;">
                <tr>
                    <td style="border: thin solid #ff9900;">
                        <figure class="cap-left">
                            <img src="http://placehold.it/400x300" />

                            <!-- the style sizes here are only to demonstrate
                                 that the class "cap-left" does something -->
                            <figcaption style="width: 200px; height: 150px;">
                                <div class="icon icon-image"></div>
                            </figcaption>
                        </figure>
                    </td>
                </tr>
            </table>
        </td>
        <td colspan=2 style="padding-top: 12px; padding-right: 12px;">
            <center><span style="font-size: 16px; font-weight: bold;">lorem ipsum</span></center>
            <br/>lorem ipsum dolor sit amet, prima brute at cum, ius tota fugit error te, eum an quod invidunt. an facer fierent iudicabit vix, pri at illud diceret probatus. maiorum ponderum omittantur te per, pri alterum propriae postulant at. ut pro nostro petentium salutandi.
            <p/>est dico stet quaeque no, ei eos dolores dignissim. mei dicunt indoctum deterruisset an, recteque moderatius eu nam. per praesent efficiantur ut, ad mel assum laoreet tincidunt. ad qui agam nullam causae, ut mei minim clita, ut movet verterem democritum est.
        </td>
    </tr>
    <TR><TD COLSPAN=6 STYLE="border-top: thin solid gray;">&nbsp;</TD></TR>
</table>

小提琴位于http://jsfiddle.net/1kwyew12/

注意：小提琴包含normalize.css v3.0.0

2 个答案:

答案 0 :(得分：1)

您可以在父元素上设置text-align: center以使内嵌内容水平居中。

然后，您需要将图像包装在内部内联块元素中。

然后将CSS ::before伪元素与display: inline-block和vertical-align: middle结合使用，使图像垂直居中。

此外，为了使图像周围的间距有效，您必须向包含该表的表格单元格添加一个类。在此示例中，我使用.left，但您可以更具体。

（Demo）

HTML 

<div class="img-wrap">
    <figure class="cap-left">
        <img src="http://placehold.it/400x300" />

        <!-- the style sizes here are only to demonstrate
                                     that the class "cap-left" does something -->
        <figcaption style="width: 200px; height: 150px;">
            <div class="icon icon-image"></div>
        </figcaption>
    </figure>
</div>

CSS 

.left {
    padding: 1vw 2vw 1vw 2vw;
    text-align: center;
}
.left table {
    display: inline-block;
    min-width: 64px;
    max-width: 200px;
}
.left table td .img-wrap {
    width: 100%;
    display: inline-block;
    height: 100%:
}
.left table td .img-wrap::before {
    content: "";
    height: 100%;
}
.left table td .img-wrap::before,
.left table td .img-wrap figure {
    display: inline-block;
    vertical-align: middle;
}
.left table td .img-wrap figure {
    width: 100%;
}
.left table td img {
    width: 100%;
}

答案 1 :(得分：0)

我不知道您是否因为原因或其对旧浏览器的意图而使用表格，但我的解决方案需要display: flex;

已添加代码：

.icon-image {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-image > img {
    max-width: 100%!important;
    width: auto;
    min-width: 64px;
    height: auto;
    max-height: 100%;
}

结果：JS Fiddle 

/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
h1{font-size:2em;margin:.67em 0}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
textarea{overflow:auto}
optgroup{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}

/* local */
table{font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:14px;border-collapse:separate}

figure img{display:block}
figure{display:block;position:relative;float:left;overflow:hidden;margin:0;padding:0}
figcaption{position:absolute;background:rgba(255,204,51,0.75);color:white;opacity:0;-webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease}
figure:hover figcaption{opacity:1}

.cap-left figcaption{bottom:0;left:-100%}
.cap-left:hover figcaption{left:0}
.cap-right figcaption{bottom:0;right:-100%}
.cap-right:hover figcaption{right:0}
.cap-top figcaption{left:0;top:-100%}
.cap-top:hover figcaption{top:0}
.cap-bottom figcaption{left:0;bottom:-100%}
.cap-bottom:hover figcaption{bottom:0}

.icon {
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	speak: none;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering */
	-moz-osx-font-smoothing: grayscale;
	 -webkit-font-smoothing: antialiased;
			 font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.icon:link, .icon:visited, .icon:focus
{
	color: #000;
}

.icon-image {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-image > img {
    max-width: 100%!important;
    width: auto;
    min-width: 64px;
    height: auto;
    max-height: 100%;
}
<table border=1>
	<TR><TD COLSPAN=6 STYLE="border-bottom: medium solid gray;">&nbsp;</TD></TR>
    <tr>
        <td style="width: 25%; background-color: cyan;">
            <table border=2 style="margin: 1vw 2vw 1vw 2vw;">
                <tr>
                    <td style="border: thin solid #ff9900;">
   						<figure class="cap-left">
                            <img src="http://placehold.it/400x300" />

                            <!-- the style sizes here are only to demonstrate
                                 that the class "cap-left" does something -->
                            <figcaption style="width: 200px; height: 150px;">
								<div class="icon icon-image">
                                    <img src="http://img1.wikia.nocookie.net/__cb20110704115705/fakemon-creators/es/images/a/a0/It's_something.png">
                                </div>
							</figcaption>
   						</figure>
                    </td>
                </tr>
            </table>
        </td>
        <td colspan=2 style="padding-top: 12px; padding-right: 12px;">
            <center><span style="font-size: 16px; font-weight: bold;">lorem ipsum</span></center>
            <br/>lorem ipsum dolor sit amet, prima brute at cum, ius tota fugit error te, eum an quod invidunt. an facer fierent iudicabit vix, pri at illud diceret probatus. maiorum ponderum omittantur te per, pri alterum propriae postulant at. ut pro nostro petentium salutandi.
            <p/>est dico stet quaeque no, ei eos dolores dignissim. mei dicunt indoctum deterruisset an, recteque moderatius eu nam. per praesent efficiantur ut, ad mel assum laoreet tincidunt. ad qui agam nullam causae, ut mei minim clita, ut movet verterem democritum est.
        </td>
    </tr>
	<TR><TD COLSPAN=6 STYLE="border-top: thin solid gray;">&nbsp;</TD></TR>
</table>

这将使图像始终居中，如果其宽度> 1则无关紧要。高于高度，反之亦然

相关问题
最新问题