Home >Web Front-end >HTML Tutorial >How to center the img in the div_html/css_WEB-ITnose
How to center the img in the div_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:11:481118browse
dc6dce4a544fdca2df29d5ac0ea9906b
asdfasfasfasfdasdfdfasfsdf
9197f0ecd16ce23bf1df8b159e9a2647
16b28748ea4df4d9c2150843fecfba68
The text is not centered, only the image is centered (not vertical)
Reply to discussion (solution)
<!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 id="Head1" runat="server"> <title>xxxxxxx</title> <style type="text/css"> <!-- div { text-align:center; width:500px; height:500px; border:1px solid #666666; } div span{ margin:0px; padding:0px; display:block; margin-left:-290px; } --></style></head><body><div> <span>asdfasfasfasfdasdfdfasfsdf</span> <img src="11.jpg"> </di </body></html> Keep moving forward...
Is it possible to fix the size of the div first
and use margin: auto to solve it?
I don’t know if it’s possible
See if it’s what you want. If not, look again. This mainly puts the image in one layer, and then centers the layer. It’s better to use different parameters. Change it.
<!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" /><title>无标题文档</title><style>#container{width:780px}#image{width:200px;margin:0 auto}</style></head><body><div id="container">123456789101112131415161718192021222324252627282930下面的图是一个200X150PX的图<div id="image"><img src="images/myphoto.jpg" width="200" height="150" /></div></div></body></html> It’s probably like this, I haven’t tested it yet, you can adjust it again.
cd2d9978bb5be16b15ba7131af74b48e
fe997708d7b1a93fc1ae9c9573a997a0
4b33c4e5e9a354e5af7365b634b354b3asdfasfasfasfdasdfdfasfsdf 16b28748ea4df4d9c2150843fecfba68
c5bd1b774325685bf8aac161016f6f8c97d03903f8ba084a9ac3fcc0f877a47516b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
cd2d9978bb5be16b15ba7131af74b48e
This sentence is enough