CSS--图片链接水平居中展示的方法

原文网址:CSS--图片链接居中展示的方法-CSDN博客

简介

本文介绍CSS图片链接水平居中展示的方法。

图片链接

问题复现

源码

html 复制代码
<html xml:lang="cn" lang="cn">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="keywords" content="anchor,fixed navigation hide anchor">
    <title></title>
</head>

<body>

<div class="container2"
     style="width: 400px ; height: 400px ; border: 3px solid black;">
    <a target="_blank" href="https://baidu.com">
        <img src=../img/bat.png alt="乒乓球拍">
    </a>
</div>

</body>

</html>

结果

方案1:img指定margin

给img元素添加margin,左右两侧自动,并指定display为block。

代码

html 复制代码
<html xml:lang="cn" lang="cn">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="keywords" content="anchor,fixed navigation hide anchor">
    <title></title>
</head>

<body>

<div class="container2"
     style="width: 400px ; height: 400px ; border: 3px solid black;">
    <a target="_blank" href="https://baidu.com">
        <img src=../img/bat.png style="margin: 0 auto; display: block" alt="乒乓球拍">
    </a>
</div>

</body>

</html>

结果

方案2:父元素指定text-align

将父元素设置为:text-align: center

代码

html 复制代码
<html xml:lang="cn" lang="cn">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="keywords" content="anchor,fixed navigation hide anchor">
    <title></title>
</head>

<body>

<div class="container2"
     style="width: 400px ; height: 400px ; text-align: center; border: 3px solid black;">
    <a target="_blank" href="https://baidu.com">
        <img src=../img/bat.png alt="乒乓球拍">
    </a>
</div>

</body>

</html>

结果

方案3:img绝对定位

代码

html 复制代码
<html xml:lang="cn" lang="cn">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="keywords" content="anchor,fixed navigation hide anchor">
    <title></title>
</head>

<body>

<div class="container2" style="width: 400px; height: 400px; border: 3px solid black; position: relative;">
    <a target="_blank" href="https://baidu.com">
        <img src="../img/bat.png" alt="乒乓球拍" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    </a>
</div>

</body>

</html>

结果

元素背景图

问题复现

代码

html 复制代码
<html xml:lang="cn" lang="cn">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="keywords" content="anchor,fixed navigation hide anchor">
    <title></title>
</head>

<body>

<div class="container1"
     style="width: 400px ; height: 400px ; border: 3px solid black;
background-image: url(../img/bat.png); background-repeat:no-repeat;">

</div>

</body>

</html>

结果

解决方案

添加CSS:background-position:center center;

代码

html 复制代码
<html xml:lang="cn" lang="cn">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="keywords" content="anchor,fixed navigation hide anchor">
    <title></title>
    <style>
        body {
            /*display: flex;*/
        }
    </style>
</head>

<body>

<div class="container1"
     style="width: 400px ; height: 400px ; text-align: center; border: 3px solid black;
background-image: url(../img/bat.png); background-repeat:no-repeat;background-position:center center;">

</div>

</body>

</html>

结果

相关推荐
Stevetagelian34 分钟前
vue2实现元素拖拽
前端·javascript·css·vue.js
Yvonne爱编码6 小时前
CSS-5.1 Transition 过渡
前端·css·状态模式·html5·hbuilder
fashia10 小时前
Java转Go日记(五十四):gin路由
开发语言·后端·golang·go·html·gin
凌冰_11 小时前
CSS3过渡
前端·css·css3
花菜会噎住14 小时前
网页 CSS美化(详解)
前端·css·html·网页
啊啊啊~~15 小时前
js拖拽事件实现简单选课功能
javascript·css·css3
第7个前端16 小时前
vue3 + vite 使用tailwindcss
前端·css·tailwind
杨超越luckly16 小时前
HTML应用指南:利用POST请求获取全国中通快递服务网点位置信息
前端·信息可视化·数据分析·html·php
Allen Bright16 小时前
【HTML-4】HTML段落标签:构建内容结构的基础
前端·html
漂流瓶jz17 小时前
聊一下CSS中的标准流,浮动流,文本流,文档流
前端·css·float·浮动·文档流·文本流·标准流