如何让li里的图片垂直居中-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

如何让li里的图片垂直居中

PHP中文网

Mar 30, 2017 pm 05:30 PM

如何让li里的图片垂直居中？

<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中文网（www.php.cn）！

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

HTML: Adakah bahasa pengaturcaraan atau yang lain?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.

HTML: Membina struktur laman webApr 14, 2025 am 12:14 AM

HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

Dari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AM

HTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.

Memahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

HTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AM

Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini

HTML, CSS, dan JavaScript: Alat penting untuk pemaju webApr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

See all articles