html - 将一个 div 居中，但将其保持在类似网格的布局中-6ren

html - 将一个 div 居中，但将其保持在类似网格的布局中

转载作者：太空宇宙更新时间：2023-11-04 08:35:03

我用 9 张图片制作了一个类似网格的图案，并希望将这 9 张图片作为一个整体居中。我实现了带有边距的网格状结构。我遇到的问题是，当我执行 margin: auto 和 width: 100% 时，它们又变成了 block 元素，而不是 inline-block 元素和以前一样。

这是我想要居中的代码:(单击“整页”以查看类似网格的布局)

.content {
  width: 100%;
}

.titletext {
  margin: 0px;
  padding: 0px;
}

.title {
  font-family: "Fjalla One";
  text-align: center;
  color: #560606;
  font-size: 100px;
  margin: 10px 50px;
}

.subtitle {
  font-family: "Fjalla One";
  text-align: center;
  color: #BF1C1C;
  font-size: 40px;
  margin: 5px 50px
}

.leftcorner {
  width: 180px;
  height: 55px;
  position: relative;
  left: 10px;
  font-family: lato;
  font-size: 20px;
  color: #A81C1C;
  top: -10px;
}

.title,
.subtitle {
  position: relative;
  top: -80px;
}

.rightcorner {
  width: 400px;
  height: 55px;
  position: absolute;
  right: 10px;
  font-family: lato;
  font-size: 20px;
  color: #A81C1C;
  top: 355px;
  float: right;
  text-align: right;
}

.products {
  position: absolute;
}

.images {
  width: 225px;
  height: 225px;
  margin: 0px 150px;
  border: 13px solid #390404;
  border-radius: 20px;
}

.strawberrycream,
.vanilladelight,
.greenlight,
.originalchoc,
.unicorn,
.americafresh,
.thegoat,
.buttermilk,
.oreo {
  display: inline-block;
  text-align: center;
}

.greenlight,
.americafresh,
.oreo {
  margin-right: 0px;
}

.strawberrycream,
.thegoat,
.originalchoc {
  margin-left: 0px;
}

.subtext {
  font-size: 30px;
  font-family: "Lato";
  color: #560606;
  margin-bottom: -15px;
  margin-top: 5px;
}

.price {
  font-size: 20px;
  font-family: "Lato";
  color: #900B0B;
  margin-bottom: 80px;
}

<html>

<head>
  <title>Cupcakes</title>
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>

<body>
  <div class="content">
    <div class="titletext">
      <p class="leftcorner">Great for home snacks and parties!</p>
      <p class="rightcorner">*All prices listed in dozens.</p>
      <h1 class="title">Cupcakes</h1>
      <h2 class="subtitle">Our great selection of hand-crafted cupcakes!</h2>
    </div>
    <div class="products">
      <div class="strawberrycream">
        <img class="images" src="Pictures/strawberrycream.jpg">
        <p class="subtext">Strawberry Cream</p>
        <p class="price">$24.99</p>
      </div>
      <div class="vanilladelight">
        <img class="images" src="Pictures/vanilladelight.jpeg">
        <p class="subtext">Vanilla Delight</p>
        <p class="price">$16.99</p>
      </div>
      <div class="greenlight">
        <img class="images" src="Pictures/greenlight.jpg">
        <p class="subtext">Green Light</p>
        <p class="price">$27.99</p>
      </div>
      <div class="originalchoc">
        <img class="images" src="Pictures/OriginalChoc.jpg">
        <p class="subtext">Original Choc'</p>
        <p class="price">$16.99</p>
      </div>
      <div class="unicorn">
        <img class="images" src="Pictures/unicorn.jpg">
        <p class="subtext">Unicorn</p>
        <p class="price">$27.99</p>
      </div>
      <div class="americafresh">
        <img class="images" src="Pictures/americafresh.jpg">
        <p class="subtext">America Fresh</p>
        <p class="price">$24.99</p>
      </div>
      <div class="thegoat">
        <img class="images" src="Pictures/TheGOAT.jpg">
        <p class="subtext">The G.O.A.T.</p>
        <p class="price">$29.99</p>
      </div>
      <div class="buttermilk">
        <img class="images" src="Pictures/Buttermilk.jpg">
        <p class="subtext">Buttermilk</p>
        <p class="price">$19.99</p>
      </div>
      <div class="oreo">
        <img class="images" src="Pictures/oreo.jpg">
        <p class="subtext">Oreo</p>
        <p class="price">$26.99</p>
      </div>
    </div>
  </div>
</body>

</html>

谢谢。

最佳答案

这是您要找的吗？您可以添加媒体查询以在屏幕达到特定大小时更改框的宽度。

.content {
  width: 100%;
}

.titletext {
  margin: 0px;
  padding: 0px;
  display:block;
}

.title {
  font-family: "Fjalla One";
  text-align: center;
  color: #560606;
  font-size: 100px;
  margin: 10px 50px;
}

.subtitle {
  font-family: "Fjalla One";
  text-align: center;
  color: #BF1C1C;
  font-size: 40px;
  margin: 5px 50px
}

.leftcorner {
  width: 180px;
  height: 55px;
  position: relative;
  left: 10px;
  font-family: lato;
  font-size: 20px;
  color: #A81C1C;
  top: -10px;
}

.title,
.subtitle {
  position: relative;
  top: -80px;
}

.rightcorner {
  width: 400px;
  height: 55px;
  position: absolute;
  right: 10px;
  font-family: lato;
  font-size: 20px;
  color: #A81C1C;
  top: 200px;
  text-align:right;
}

.products {
  position: absolute;
}

.images {
  width: 225px;
  height: 225px;
  border: 13px solid #390404;
  border-radius: 20px;
}

.strawberrycream,
.vanilladelight,
.greenlight,
.originalchoc,
.unicorn,
.americafresh,
.thegoat,
.buttermilk,
.oreo {
  display: inline-block;
  text-align: center;
}

.greenlight,
.americafresh,
.oreo {
  margin-right: 0px;
}

.strawberrycream,
.thegoat,
.originalchoc {
  margin-left: 0px;
}

.subtext {
  font-size: 30px;
  font-family: "Lato";
  color: #560606;
  margin-bottom: -15px;
  margin-top: 5px;
}

.price {
  font-size: 20px;
  font-family: "Lato";
  color: #900B0B;
  margin-bottom: 80px;
}
.box{
  width:33%;
  text-align:center;
}

<html>

<head>
  <title>Cupcakes</title>
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>

<body>
  <div class="content">
    <div class="titletext">
      <p class="leftcorner">Great for home snacks and parties!</p>
      <p class="rightcorner">*All prices listed in dozens.</p>
      <h1 class="title">Cupcakes</h1>
      <h2 class="subtitle">Our great selection of hand-crafted cupcakes!</h2>
    </div>
    <div class="products">
      <div class="strawberrycream box">
        <img class="images" src="Pictures/strawberrycream.jpg">
        <p class="subtext">Strawberry Cream</p>
        <p class="price">$24.99</p>
      </div>
      <div class="vanilladelight box">
        <img class="images" src="Pictures/vanilladelight.jpeg">
        <p class="subtext">Vanilla Delight</p>
        <p class="price">$16.99</p>
      </div>
      <div class="greenlight box">
        <img class="images" src="Pictures/greenlight.jpg">
        <p class="subtext">Green Light</p>
        <p class="price">$27.99</p>
      </div>
      <div class="originalchoc box">
        <img class="images" src="Pictures/OriginalChoc.jpg">
        <p class="subtext">Original Choc'</p>
        <p class="price">$16.99</p>
      </div>
      <div class="unicorn box">
        <img class="images" src="Pictures/unicorn.jpg">
        <p class="subtext">Unicorn</p>
        <p class="price">$27.99</p>
      </div>
      <div class="americafresh box">
        <img class="images" src="Pictures/americafresh.jpg">
        <p class="subtext">America Fresh</p>
        <p class="price">$24.99</p>
      </div>
      <div class="thegoat box">
        <img class="images" src="Pictures/TheGOAT.jpg">
        <p class="subtext">The G.O.A.T.</p>
        <p class="price">$29.99</p>
      </div>
      <div class="buttermilk box">
        <img class="images" src="Pictures/Buttermilk.jpg">
        <p class="subtext">Buttermilk</p>
        <p class="price">$19.99</p>
      </div>
      <div class="oreo box">
        <img class="images" src="Pictures/oreo.jpg">
        <p class="subtext">Oreo</p>
        <p class="price">$26.99</p>
      </div>
    </div>
  </div>
</body>

</html>

关于html - 将一个 div 居中，但将其保持在类似网格的布局中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44527236/

文章推荐： C错误导致函数常量返回值

文章推荐： java - 使用 JAXB 处理而不是 Foo

文章推荐： java - Drools Planner 规则仅触发一次

类似 SQL 的搜索字符串开头为
学习SQL。有一个简单的带有字段标题的桌面游戏。我想根据标题进行搜索。如果我有一款名为 Age of Empires III: Dynasties 的游戏，并且我使用 LIKE 和参数 Age of
haskell - 为列表创建一个镜头(类似)
我正在尝试为以下数据结构创建镜头。我正在使用lens-family . data Tree = Tree { _text :: String, _subtrees ::
类似 Clojure 的方式在循环中使用数据结构
我发现很难理解这一点。比如说，在 Python 中，如果我想要一个根据用户输入在循环中修改的列表，我会有这样的内容: def do_something(): x = [] while(
类似 mysql 的部分匹配问题
我有一个像这样的 mysql 查询 SELECT group_name FROM t_groups WHERE group_name LIKE '%PCB%'; 结果是 group_name ----
MySQL - 类似 - 正则表达式的替代品？
我的数据库表中有超过一百万条记录。当我使用like时非常慢，当我使用match against时他们丢失了一些记录。我创建帮助表: 标签列表 tag_id tag_name tag_rel_me
javascript - JXBrowser 类似
我在我的一个 Java 项目中使用 JXBrowser 来简单显示 googlemaps 网页，以便我可以在那里跟踪路线，但最近我想改进该项目，但我的问题是 JXBrowser 的许可证过期(只有一个
类似 Mysql 的语法
小问题:如何将 mysql_escape_string 变量包含在 like 子句中？ "SELECT * FROM table WHERE name LIKE '%". %s . "%'" 或
类似 Javascript 的确认框
我尝试使用几个jquery消息插件，例如alertify . 但我注意到的主要事情是系统消息框会停止后台功能，直到用户响应。其他插件没有此功能。有没有办法将此功能添加到 jquery 插件中？可以扩
类似 ruby 猫壳
我是 Ruby 新手。我过去使用过 shell。我正在将 shell 程序转换为 ruby。我有以下命令 cmd="cat -n " + infile + " | grep '127.0.0.1
类似 iOS 的网页界面
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
string - 类似 str 的迭代器
当我研究 Rust 时，我试图编写一个 Rust 函数来查看任何可迭代的字符串。我最初的尝试是 fn example_1(iter: impl Iterator); fn example_2(ite
GWT 代码拆分下载进度条 - 类似 gmail
我必须在我的项目中使用代码拆分。但无论如何，第一次初始下载有一些代码。现在我想向最终用户展示代码下载(.cache.html - 或其他代码拆分)的进度，例如 gmail 启动进度。请你帮帮我。
Clojure::类似 Lint 的提示
我今天找到了一个错误，它最终是由我代码中的以下片段引起的(我试图在列表中仅过滤“PRIMARY KEY”约束): (filter #(= (% :constraint_type "PRIMARY KE
SQL Server - 类似/模式匹配
我正在尝试在关键字段上实现检查约束。关键字段由 3 个字符的前缀组成，然后附加数字字符(可以手动提供，但默认是从序列中获取整数值，然后将其转换为 nvarchar)。关键字段定义为 nvarhcar(
java - 类似 ArrayList 声明之间的类型差异
我正在尝试使用以下方式创建 List 实例: List listOne = new ArrayList(); List listTwo = new ArrayList(){}; List listTh
macos - UITableView 类似 NSTableView
我过去曾为 iOS 开发过，最近转向了 mac 开发。我开始了一个“感受”事物的项目，但遇到了一个问题。我试图创建一个 NSTableView 来显示多个项目，包括一个标签、一个 2 UIImageV
类似 "not having"的 SQL 查询？
我正在尝试编写一个查询，该查询将返回哪些主机缺少某个软件: Host Software A Title1 A
c - 类似 malloc 函数的严格别名的原因
AFAIK，在三种情况下别名是可以的仅限定符或符号不同的类型可以互为别名。 struct 或 union 类型可以为包含在其中的类型设置别名。将 T* 转换为 char* 是可以的。 (不允许相反
regex - 类似 Perl 的速记字符类在括号表达式中不起作用
\s 似乎不适用于 sed 's/[\s]\+//' tempfile 当它为工作时 sed 's/[ ]\+//' tempfile 我正在尝试删除由于命令而出现在每行开头的空格: nl -s ')
F# 图形库(类似 ocamlgraph)
我正在使用 ocamlgraph 在 ocaml 中编写程序，并想知道是否要将其移植到 F# 我有哪些选择？谢谢。最佳答案 QuickGraph .Net 最完整的图形库之一关于F# 图形库(类似

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 将一个 div 居中，但将其保持在类似网格的布局中