2.5d 相关问题

最新问题

DeleteItem API 引发错误 - 提供的关键元素与架构 (DynamoDB) 不匹配
内容被截断时更改字体大小
不使用 Flexbox 的 CSS 元素居中对齐示例</</desc> <question vote="29"> <p>我在让文本显示在网页屏幕中间（高度方向）时遇到问题。该网站的 HTML 是：</p> <pre><code><html lang="en"> <head> <title>example</title> <link href="example.css" rel="stylesheet"> </head> <body> <div class="home-container"> <div class="home-row"> <div class="some-other-class"> <p>text that should be in the middle</p> </div> </div> </div> </body> </html> </code></pre> <p>我想要做的是将 home-container 元素一直延伸到页面底部，并将 <pre><code>text that should be in the middle</code></pre> 放在它的中间。我的 <pre><code>css</code></pre> 看起来像：</p> <pre><code>html, body{ height:100%; } .home-container{ width: 100%; height: 100%; background-color: rgba(139,0,0,0.4); } .home-row{ vertical-align: middle; } </code></pre> <p>我明白，如果我像这样制作<pre><code>home-container</code></pre>，我想做的事情是可能的：</p> <pre><code>.home-container{ width: 100%; height: 100%; background-color: rgba(139,0,0,0.4); align-items: center; display: flex; } </code></pre> <p>但这并不适用于所有浏览器。我对 <pre><code>vertical-align</code></pre> 属性做错了什么？在我的例子中，ID 并没有真正做任何事情......</p> </question> <answer tick="true" vote="22"> <p>要使用 <pre><code>vertical-align:middle</code></pre>，请在 <pre><code>display:table-cell</code></pre> 上添加 <pre><code>.home-row</code></pre>，并在 <pre><code>display:table</code></pre><pre> 上添加 </pre><code>.home-container</code></p> <p>参见这里<strong><a href="https://jsfiddle.net/Mihai_T/9rs2fayj/3/" rel="noreferrer">jsfiddle</a></strong>或片段</p> <p></p><div data-babel="false" data-lang="js" data-hide="true" data-console="true"> <div> <pre><code>html, body { height: 100%; } .home-row { vertical-align: middle; display: table-cell; } .home-container { width: 100%; height: 100%; background-color: rgba(139, 0, 0, 0.4); display: table; }</code></pre> <pre><code><div class="home-container"> <div class="home-row"> <div class="some-other-class"> <p>text that should be in the middle</p> </div> </div> </div></code></pre> </div> </div> <p></p> <p><em><strong>vertical-align</strong> CSS 属性指定内联或表格单元格框的垂直对齐方式。</em></p> <p>在此处阅读更多内容<strong><a href="https://developer.mozilla.org/en/docs/Web/CSS/vertical-align" rel="noreferrer">垂直对齐</a></strong></p> <p><strong>编辑 2020 年</strong> 有一种更好的方法可以使用 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox" rel="noreferrer"><pre><code>flexbox</code></pre></a></p> 获得相同的结果 <p>检查下面的片段</p> <p>与<pre><code>flexbox</code></pre>一起玩。您可以将其添加到其他物品上，而不仅仅是容器</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>.home-container { background: red; display:flex; flex-direction: column; justify-content: center; height:100vh; }</code></pre> <pre><code><div class="home-container"> <div class="home-row"> <div class="some-other-class"> <p>text that should be in the middle</p> </div> </div> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="15"> <p>试试这个：</p> <pre><code> <style> .home-container { width: 100%; height: 800px; background-color: rgba(139, 0, 0, 0.4); text-align: center; } .some-other-class { position: relative; top: 50%; transform: translateY(-50%); } </style> </code></pre> <p>HTML</p> <pre><code><div class="home-container"> <div class="some-other-class"> <p>text that should be in the middle</p> </div> </div> </code></pre> </answer> <answer tick="false" vote="8"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>html, body{ height:100%; margin: 0; } .home-container{ width: 100%; height: 100%; display: table; text-align: center; background-color: rgba(139,0,0,0.4); } .home-row{ display: table-cell; vertical-align: middle; }</code></pre> <pre><code><html lang="en"> <head> <title>example</title> <link href="example.css" rel="stylesheet"> </head> <body> <div class="home-container"> <div class="home-row"> <div class="some-other-class"> <p>text that should be in the middle</p> </div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <pre><code><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animations</title> <link rel="stylesheet" href="animations.css"> </head> <body> <div class="magic"> <p> magic </p> </div> </body> </html> .magic{ animation-name: rainbow; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; padding: 20px; margin: 20px; height: 150px; width: 150px; text-align: center; margin: auto; color: white; display: table; } .magic p{ display: table-cell; vertical-align: middle; } @keyframes rainbow{ 0%{background-color: red;} 20%{background-color: orange;} 40%{background-color: yellow; color: black;} 60%{background-color: green;} 80%{background-color: blue;} 100%{background-color: purple;} } </code></pre> </answer> </body></html>
KeyError：在 Python 3.13 上安装 openai-whisper 时出现“__version__”
Java Spring 客户验证器不工作
材质顶部标签标签未显示
Openai Whisper 下载错误
如何解析Azure AD B2C自定义策略中图表中的参数？
Firefox 开发工具工具栏分为列 - 我希望它保持行
授予后台位置权限后，将用户带回应用程序
有没有办法让 Firestore 数据库中的一个集合直接位于另一个集合下？
NASM 计算器 - 不会打印结果
我不明白 Java String.intern() 文档？
通过反射设置字段值
使 DLL 大小尽可能小的最佳方法是什么？
Web 编解码器 API 中要使用的有效编解码器字符串是什么？
有没有办法检查当前应用程序是否是misx应用程序
如何将两条数据显示到一个文本输入中
带有变体的自定义产品类型，变体名称未显示在购物车/结帐中
在控制器中编辑config.yml文件