最新消息:欢迎加入小松的QQ群一起讨论一起学习,服务器快到期了,新买了台服务器,最近要做服务器迁移

css文字图片input垂直居中

前端技术 794浏览 0评论

做php的必须会点css,不然在工作中麻烦会比较多。今天在做一个项目的时候,前端给过来的页面样式不对,没有按照需求文档来,如果让前端在修改,那么我可能我写php代码来不及,而且别人还不会马上处理。于是自己花了半天时间来做这个事,其中遇到的麻烦事是垂直居中的问题,下面是我写的css文字图片input垂直居中的一个案例,下面是预览图和代码

css文字图片input垂直居中预览图

<style>
.shuli{ width:500px; height:50px; line-height:50px; border:1px solid #F00;display:table;}
.shuli a{ margin:0px; padding:0px;display:table-cell;vertical-align: middle;}
</style>
<div class="shuli">
请输入php小松博客的网站:<input name="" type="text" />
<a href="http://jq.qq.com/?_wv=1027&amp;k=UcGd9q" rel="external nofollow" target="_blank"><img src="https://static.phpsong.com/group.png" alt="phpQQ群"></a>
</div>

上面的代码文字和input是height:50px;line-leight:50px;垂直居中的
图片是:.shuli中的display:table; 和.shuli a中的display:table-cell;vertical-align: middle;垂直居中的。
我不是写前端的,如果有更好的方法请留言给我

QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» css文字图片input垂直居中
本文链接地址:https://www.phpsong.com/836.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!