HTML/CSS の初心者: DIV で画像を垂直方向の中央に配置する方法と、テキストと DIV_html/css_WEB-ITnose の間の隙間をなくす方法-htmlチュートリアル-php.cn

回复讨论(解决方案)

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML/CSS の初心者: DIV で画像を垂直方向の中央に配置する方法と、テキストと DIV_html/css_WEB-ITnose の間の隙間をなくす方法

Jun 21, 2016 am 09:47 AM

本帖最后由 u013097499 于 2013-12-10 16:40:40 编辑

问题1.图片无法和文字对齐

问题2.设置了hover属性background-color:#CCC 效果如图

我希望设置成：

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;style&gt;	body {		margin:0;		}	.softtext {		margin:0;		color:#109010;		border-left:5px;		}	.softtext:hover{		position:relative;		color:#F06030;		background-color:#CCC		}	.header {		background-color:#9CF;		font-size:14px;		height:23px;		line-height:23px;		}	a:link{		text-decoration:none;		}&lt;/style&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;header&quot;&gt;&lt;img src=&quot;home.gif&quot; scr=&quot;/&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;把XXX设置为主&quot; class=&quot;softtext&quot;&gt;把XXX设置为主页&lt;/a&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

回复讨论(解决方案)

修饰性图片可以写成a的背景图啊~

修饰性图片可以写成a的背景图啊~
然后就可以调整background-position的x/y轴的值

如果你非要用图片呢，可以给那小图片设置position:relative;top:3px;margin-right:2px

修饰性图片可以写成a的背景图啊~
然后就可以调整background-position的x/y轴的值

如果你非要用图片呢，可以给那小图片设置position:relative;top:3px;margin-right:2px

设置成了背景，那张图就和第一个字重合了，我用空格把文字向后提，不过这办法好纠结。

说2种方法吧
1、二楼已经说了，把图片作为背景图片，通过定位确定位置。文字出现在图片上，可以设置缩进就可以了。给文字加个text-indent:2em;
2、插入图片的形式，可以给图片或者文字加个margin-top，调整上下位置。或者调整文字的行高

没那个小图片，随便找了个，高度你再调节下

[code=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>
<style>
    body {
        margin:0;
        }
    .softtext {
        margin:0;
        color:#109010;
        border-left:5px;
        }
    .softtext:hover{
        position:relative;
        color:#F06030;
        background-color:#CCC
        }
    .header {
background:url(weibo.png) no-repeat; background-position:0 10px;
        background-color:#9CF;
        font-size:14px;
        height:50px;
        line-height:50px;
text-indent:3em;
        }
    a:link{
        text-decoration:none;
        }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div class="header">
<a href="#" title="把XXX设置为主" class="softtext">把XXX设置为主页</a>
</div>
</body>
</html> 引用:

装飾画像は、背景位置の x/y 軸値を調整できます

主張する画像を使用する場合、小さな画像に対して、position:relative;top:3px;margin-right:2px を設定できます
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああDIV の上部と下部は変更できません解決しました。。。また助けてください。

装飾的な画像は a~ の背景画像として書くことができます
次に、background-position の x/y 軸の値を調整できます
どうしても画像を使用する場合は、position:relative を設定できます。小さな画像; top:3px;margin-right:2px

ああああああ、ホバリングシャドウと DIV の上部と下部の間にはまだ解決できないギャップがあります。。。また助けてください。
ページを送ってください。。私がやってあげます。。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。