以下是我的代码，如何在img？{/ p>中对齐figure box
<ul class="blocs">
<!--product big-->
<li class="product-big">
<section>
<h1>text</h1>
<p>
Lorem ipsum dolor sit amet, consectetur elit.
Aliquam at porttitor sem. Aliquam erat volutpat.
</p>
<ul>
<li> text</li>
<li> text</li>
<li>
<figure>
<a href="#">
<img src="http://lorempixel.com/g/400/200/" alt="product"/>
</a>
</figure>
</li>
</ul>
</section>
</li>
</ul>
答案 0 :(得分：0)
在你的css中使用它
metadata.iso_language_code metadata.result_type created_at id id_str
1 en recent Thu Oct 22 01:19:44 +0000 2015 6.570034e+17 657003367575760896
2 en recent Thu Oct 22 01:15:46 +0000 2015 6.570024e+17 657002373307568129
3 en recent Wed Oct 21 20:01:57 +0000 2015 6.569234e+17 656923397985816576
text
1 @esorarad It worked, in case youre curious, since I keep bothering you.
2 @esorarad still testing!!
3 @esorarad Hey Dara! Tweeting at you so I can test a program I'm making :P Hopeful game night in the near future!
source truncated in_reply_to_status_id in_reply_to_status_id_str
1 <a href="http://twitter.com" rel="nofollow">Twitter Web Client</a> FALSE NA NA
2 <a href="http://twitter.com" rel="nofollow">Twitter Web Client</a> FALSE NA NA
3 <a href="http://twitter.com" rel="nofollow">Twitter Web Client</a> FALSE NA NA
in_reply_to_user_id in_reply_to_user_id_str in_reply_to_screen_name user.id user.id_str user.name user.screen_name
1 1512420228 1512420228 esorarad 75328338 75328338 Thomas uName
2 1512420228 1512420228 esorarad 75328338 75328338 Thomas uName
3 1512420228 1512420228 esorarad 75328338 75328338 Thomas uName
user.location user.description user.url user.urls user.protected user.followers_count user.friends_count user.listed_count
1 Philadelphia PA NA NULL FALSE 36 244 1
2 Philadelphia PA NA NULL FALSE 36 244 1
3 Philadelphia PA NA NULL FALSE 36 244 1
user.created_at user.favourites_count user.utc_offset user.time_zone user.geo_enabled user.verified
1 Fri Sep 18 16:56:20 +0000 2009 121 -18000 Quito FALSE FALSE
2 Fri Sep 18 16:56:20 +0000 2009 121 -18000 Quito FALSE FALSE
3 Fri Sep 18 16:56:20 +0000 2009 121 -18000 Quito FALSE FALSE
user.statuses_count user.lang user.contributors_enabled user.is_translator user.is_translation_enabled user.profile_background_color
1 616 en FALSE FALSE FALSE C0DEED
2 616 en FALSE FALSE FALSE C0DEED
3 616 en FALSE FALSE FALSE C0DEED
user.profile_background_image_url user.profile_background_image_url_https user.profile_background_tile
1 http://abs.twimg.com/images/themes/theme1/bg.png https://abs.twimg.com/images/themes/theme1/bg.png FALSE
2 http://abs.twimg.com/images/themes/theme1/bg.png https://abs.twimg.com/images/themes/theme1/bg.png FALSE
3 http://abs.twimg.com/images/themes/theme1/bg.png https://abs.twimg.com/images/themes/theme1/bg.png FALSE
user.profile_image_url
1 http://pbs.twimg.com/profile_images/563789490821410817/vB2dhVj1_normal.jpeg
2 http://pbs.twimg.com/profile_images/563789490821410817/vB2dhVj1_normal.jpeg
3 http://pbs.twimg.com/profile_images/563789490821410817/vB2dhVj1_normal.jpeg
user.profile_image_url_https user.profile_link_color
1 https://pbs.twimg.com/profile_images/563789490821410817/vB2dhVj1_normal.jpeg 0084B4
2 https://pbs.twimg.com/profile_images/563789490821410817/vB2dhVj1_normal.jpeg 0084B4
3 https://pbs.twimg.com/profile_images/563789490821410817/vB2dhVj1_normal.jpeg 0084B4
user.profile_sidebar_border_color user.profile_sidebar_fill_color user.profile_text_color user.profile_use_background_image
1 C0DEED DDEEF6 333333 TRUE
2 C0DEED DDEEF6 333333 TRUE
3 C0DEED DDEEF6 333333 TRUE
user.has_extended_profile user.default_profile user.default_profile_image user.following user.follow_request_sent user.notifications
1 FALSE TRUE FALSE FALSE FALSE FALSE
2 FALSE TRUE FALSE FALSE FALSE FALSE
3 FALSE TRUE FALSE FALSE FALSE FALSE
geo coordinates place contributors is_quote_status retweet_count favorite_count entities.hashtags entities.symbols
1 NA NA NA NA FALSE 0 0 NULL NULL
2 NA NA NA NA FALSE 0 0 NULL NULL
3 NA NA NA NA FALSE 0 0 NULL NULL
entities.user_mentions entities.urls favorited retweeted lang
1 esorarad, esorarad, 1512420228, 1512420228, 0, 9 NULL FALSE FALSE en
2 esorarad, esorarad, 1512420228, 1512420228, 0, 9 NULL FALSE FALSE en
3 esorarad, esorarad, 1512420228, 1512420228, 0, 9 NULL FALSE FALSE en
答案 1 :(得分：0)
此css将调整图像大小以适合您的容器，然后将其水平和垂直居中。
/* Image center */
figure {
/* Figure: orange */
border: 2px solid #da0;
}
figure a {
/* Anchor (container): gray */
/*
The container is 300x300 here
but you can change it to
whatever you want
*/
width: 300px;
height: 300px;
line-height: 300px;
display: block;
overflow: hidden;
text-align: center;
border: 2px solid #666;
}
figure img {
max-width: 100%;
max-height: 100%;
margin: auto;
vertical-align: middle;
}
http://codepen.io/victmo/pen/ZbxjNg
编辑：根据您的小提琴，尝试遵循相同原则的这些代码：
.product-big{
display: block;
overflow: hidden;
position: relative;
width: 624px ;
height: 317px;
background:black;
color: white;
margin: 10px 0;
}
/*
Layout: This will have description
and fig side by side
*/
.product-big section,
.product-big figure {
margin: 0;
padding: 0;
width: 50%;
height: 317px;
float:left;
text-align: center;
overflow: hidden;
}
.product-big figure {
line-height: 317px;
/*
for vertical-align to work, it's
parent line-height has to be same
height as the container
*/
}
.product-big figure img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.product-big section h1{
margin-top: 20px;
margin-bottom: 40px;
font-family: "Lato";
font-weight: normal;
text-transform: uppercase;
}
.product-big section p{
font-size: 15px;
margin-bottom: 30px;
line-height: 1.4;
margin-left: 50px;
margin-right: 50px;
}