个人中心
gpt4 book ai didi

html - margin 自动不居中我的形象

转载 作者：太空宇宙 更新时间：2023-11-04 02:53:09 24 4
gpt4 key购买 nike

我正在上初学者 html 和 css 类(class)，我们正在创建一页简历。它有一些带照片的标题等，然后是一些中间有照片的文本。

html 说:

<body>

        <header>
            <h1>Name Surname</h1>
            <h2>Blogger</h2>

            <p>
            <a href="http://facebook.com"><img src="http://bit.ly/1Waz24Q" alt="Facebook Icon" /></a>
            <a href="http://twitter.com"><img src="http://bit.ly/1Waz2BY" alt="Twitter Icon" /></a>
            <a href="https://plus.google.com"><img src="http://bit.ly/1Waz6lg" alt="Google Plus Icon" /></a>
            <a href="http://pinterest.com"><img src="http://bit.ly/1Waz9NH" alt="Pinterest Icon" /></a>
            </p>
        </header>

        <main>
            <h3>Background</h3>

            <p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>

            <p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" alt="Foto Blanca"/></p>

            <p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>

            <p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>

            <h3>Filosofia</h3>

            <p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>

        </main>

    </body>

我想将图像居中。

老师/课说因为图片在段落之间，我们可以在css中添加:

p {
margin-left: auto;
margin-right: auto;
}

它似乎适用于她的:http://i.stack.imgur.com/mmh7J.png

但我猜那只是因为她的照片较小。在我的它根本不起作用!看:

http://i.stack.imgur.com/16Wvg.png

我试图以任何我能想到的方式将它居中:直接在 css img margin right auto 和 margin left auto 中添加，还有 img text-align center 等。但没有任何效果

但是，最重要的是，我想知道为什么她所说的不起作用。我想学习两件事:为什么这不起作用以及如何居中然后我的形象

谢谢!

最佳答案

出现此问题是因为 margin:auto仅当元素具有 display:block 时才能居中元素.

<p>有display:block默认情况下(所以 margin:auto 有效)，而 <img>有一个 display:inline或 display:inline-block .

(如果您还没有在类里面学习过 display，您可以使用 this link to CSS Tricks 找到一些有用的信息)

使用 margin:auto 将图像居中, 给图像一个 display:block .

我创建了一个演示:

http://jsfiddle.net/gxjmx9h4/

在演示中，我给图像一个类 .myImage并使用该类应用样式(否则，所有图像都将居中......包括社交媒体图像)。

W3C(制定网络标准的人)有一个很棒的页面讨论如何居中元素:http://www.w3.org/Style/Examples/007/center

请随意使用我的演示进行试验...欢迎加入俱乐部!

关于html - margin 自动不居中我的形象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32672347/

24 4 0
文章推荐： c - 函数返回一个没有相关参数的条件函数
文章推荐： python - 合并多个组 ID 以形成一个合并的组 ID？
文章推荐： c - C中的许多包装函数
文章推荐： python - 在 Django 中，如何获取一个模型的所有实例，这些实例具有使用 ForeignKey 字段附加到它的相关模型的其他实例？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com