ホームページ > 記事 > ウェブフロントエンド > 写真を縦方向に中央に配置する方法
写真を縦方向に中央に配置する方法
- PHP中文网オリジナル
- 2017-03-30 17:30:443340ブラウズ
リーで写真を垂直方向の中央に配置するにはどうすればよいですか?
<div class="psdthumb2">
<ul>
<li>111111</li>
<li class="qq2">
<img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif">
</li>
</ul>
<ul>
<li>222222</li>
<li class="qq2">
<img src="http://img11.360buyimg.com/n4/3445/522086b7-dc0a-432c-b027-7b2a80c79f29.jpg">
</li>
</ul>
</div>display:table などは使用しないでください。そのような li は大きなセルのスペースを占有し、画像 li と密接に接続することができないからです。
ディスカッションへの返信 (解決策)
<style>
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size:262px;
/*约为高度的0.873，300*0.873 约为262*/
*font-family:Arial;
/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:400px; height:300px; border:1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
</style>
<div class="box">
<img src="mm1.jpg"/>
</div>画像は、li の前にある小さな点を基準にして中央に配置される必要があります。もしそうなら、以下の私の書き方を試してみてください:
.psdthumb2 ul{list-style:none}
.psdthumb2 ul li{background:url(xxxx.jpg) no-repeat left center;
padding-left:(这里的数值跟前面的图片宽度有关系)px}このアイデアは、li の前にある小さな点を置き換えて、常に上下の中央に配置することです。
これは li 用ではないようです。 以下は完全な HTML です。編集できますか?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
<style type="text/css">
.psdthumb2 ul {
list-style: none;
}
li.qq2{
height: 400px;
width: 400px;
background-color: red;
}
</style>
</head>
<body>
<div class="psdthumb2">
<ul>
<li>111111</li>
<li class="qq2">
<img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif">
</li>
</ul>
<ul>
<li>222222</li>
<li class="qq2">
<img src="http://img11.360buyimg.com/n4/3445/522086b7-dc0a-432c-b027-7b2a80c79f29.jpg">
</li>
</ul>
</div>
</body>
</html>または、bacbf9e1ad7f40415ce1670e31edfee3adca8a5fa06ffeafb062c2e3f274b930 を使用して、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
.psdthumb2 ul {
list-style: none;
}
li.qq2{
height: 400px;
width: 400px;
background-color: red;
position:relative;
}
img{
position:absolute;
left:50%;
top:50%;
}
#q1{
margin-left:-22px;
margin-top:-21px;
}
#q2{
margin-left:-50px;
margin-top:-50px;
}
</style>
</head>
<body>
<div class="psdthumb2">
<ul>
<li>111111</li>
<li class="qq2">
<img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" id="q1">
</li>
</ul>
<ul>
<li>222222</li>
<li class="qq2">
<img src="http://img11.360buyimg.com/n4/3445/522086b7-dc0a-432c-b027-7b2a80c79f29.jpg" id="q2">
</li>
</ul>
</div>
</body>
</html> のように中央に配置したいものを丸で囲んでみることもできます。上記は、li で画像を垂直方向に中央に配置する方法です。 PHP Chinese Net (www.php.cn) に注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。