用CSS中心图像 [英] Center image with CSS

查看:76
本文介绍了用CSS中心图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想将图像和文字居中。但是不行不动。



我尝试过的事情:



i want to center image and text. but dont no not work.

What I have tried:

<style>
    .centerimage {
        top:0;
        right:0;
        left:0;
        bottom:0;
    }
</style>



<div class="centerimage">
    <img src="~/Content/LeaveGrp.jpg" style="margin:0px 0px 0px 0px" />
    <p>you left the group</p>
</div>

推荐答案

看看下面的内容。我添加了位置绝对值,其中顶部。这应该让你接近你想要的;虽然你可能需要调整一下。以下是您的样本的更新测试。



Take a look below. I added position absolute with left and top. This should get you close to what you want; though you'll probably need to tweak it a bit. Below is an updated test of your sample.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
    <style>
    .centerimage {text-align: center;
    position:absolute;
    left:50%;
    top:50%;
    }
</style>
 </head>
 <body>
<div class="centerimage" style="border: 1px solid #000;">
    <img src="https://codeproject.global.ssl.fastly.net/App_Themes/CodeProject/Img/logo250x135.gif" />
    <p>you left the group</p>
</div>
 </body>
</html>


这篇关于用CSS中心图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆