请教各位大神!CSS中文字旁边添加图片问题!

Lundy66 2019-01-17 08:51:32


小弟想在红线部分修改为一个地球的图片(用于多语言选择)
结果不管修改css,或者修改html,都是不居中的图片。
如下图

请问大神们,要如何修改才比较好看。像图1原来那样。

html代码
<div id="leftcontrol">
<ul id="nav">
<li><div id="closelc" class="fr btn hide"><div class="lcbody"><div class="lcitem top"><div class="rect top"></div></div><div class="lcitem bottom"><div class="rect bottom"></div></div></div></div></li>
<li class="navitem active"><a class="transform" href="http://localhost/m"><span class="circle transform"></span>首页</a></li>
<li class="navitem "><a href='javascript:;' class="hassub"><span class="circle transform"></span>产品展示1<span class="more"><span class="h"></span><span class="h v transform"></span></span></a>
<ul class="subnav transform"
data-height="150"

>

<li><a href="list.php?tid=23"><i class="fa fa-angle-right"></i>红酒1</a></li>

<li><a href="list.php?tid=24"><i class="fa fa-angle-right"></i>饮料1</a></li>

<li><a href="list.php?tid=25"><i class="fa fa-angle-right"></i>其余1</a></li>

</ul>

</ul>
</div>
</body>
</html>



CSS代码:
@charset "utf-8";
/* CSS Document */


/*导航*/
#leftcontrol {background: #FAFAFA;}
#leftcontrol ul li {border-top: 1px solid #EBEBEB;}
#leftcontrol > ul > li.active a {background: #F1F1F1;color: #4E4E4E;}
#leftcontrol ul li:hover {background-color: transparent;}
#leftcontrol ul li.active a.hassub {background: #EBEBEB;}
#leftcontrol ul.subnav li a {background: #ebebeb;color: #4E4E4E;}
#leftcontrol ul.subnav li.active a {background: #E7E7E7;}
#sitecontent {box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);}
#leftcontrol ul li a span.circle {border: #D8D8D8 1px solid; border-radius: 0px;width: 1px;background-color: #D8D8D8;}
#leftcontrol ul li.active a span.circle { border-color: #ff072a;background-color: #ff072a;border-radius: 0px;width: 1px;}
#leftcontrol ul.subnav li a i {color: #B4B4B4;}
/*导航结束*/

...全文
801 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
My f 2019-02-24
  • 打赏
  • 举报
回复
引用 7 楼 jiajia19851116 的回复:
具体的话还得看使用环境吧,比如浏览器和平台,一般性操作其实还是比较简单的:
一、background背景图标,通过背景来定位,注意留出定位的空间(宽度和高度)
二、直接写在html里的img图片,定义成内联或者浮动或者绝对定位
三、有时候在ie下,图标和文字无法垂直居中,需要看情况设置 vertical-align: middle, display: inline-block 以及 margin 来调整了
四、可以的话,建议用图标字体吧,这个比较好用

一般这种样式还是建议用图标的显示比较好。
  • 打赏
  • 举报
回复
vertical-align: middle;
jiajia19851116 2019-01-27
  • 打赏
  • 举报
回复
具体的话还得看使用环境吧,比如浏览器和平台,一般性操作其实还是比较简单的:
一、background背景图标,通过背景来定位,注意留出定位的空间(宽度和高度)
二、直接写在html里的img图片,定义成内联或者浮动或者绝对定位
三、有时候在ie下,图标和文字无法垂直居中,需要看情况设置 vertical-align: middle, display: inline-block 以及 margin 来调整了
四、可以的话,建议用图标字体吧,这个比较好用
冉义 2019-01-24
  • 打赏
  • 举报
回复
你可以对这个图片绝对定位,相对于list的坐标就可以
qq_22429185 2019-01-22
  • 打赏
  • 举报
回复
效果: 你看看这样行不行,你可以根据图片的高度调一下width,height(代码在后面的图里面,自己打)
醉酒笑泪 2019-01-18
  • 打赏
  • 举报
回复
你可以给他一个背景图片,然后调一下他的位置应该就可以了
刀锋&刺客 2019-01-18
  • 打赏
  • 举报
回复
给图片进行定位,根据top或left值移动图片使图片居中显示,
style="position:relative;top:0;left:0"

風灬雲 2019-01-18
  • 打赏
  • 举报
回复
实现方法大致两种: 1、图片作为背景图,通过调整背景图位置居中 2、图片作为单独节点,则可以通过定位、边距等办法居中
浪戟天下 2019-01-17
  • 打赏
  • 举报
回复
定位应该是会有效果的,

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧