首页 > 解决方案 > 有没有办法让a居中 and <div> element in a parent div without using display: flex?</h1> <div id="body"><p>I need to center a div element and a textarea element in the same parent div, and I've tried using display: block on the text</p> </div> <div class="container" id="article"> <div class="page-header"> <h1>html - 有没有办法让a居中<textarea> and <div> element in a parent div without using display: flex?</h1> <div id="body"><p>I need to center a div element and a textarea element in the same parent div, and I've tried using display: block on the text</h1> </div> <div class="con"> <h3>问题描述</h3> <p class="author">标签： <span>html</span><span>css</span></div> <h3>解决方案</h3> <hr> <div class="con "> <div class="body"> <p><em>该解决方案由 Temani Afif 在<a href="https://stackoverflow.com/questions/60711681/is-there-a-way-to-center-a-textarea-and-div-element-in-a-parent-div-without#comment107416311_60711681">评论</a></em>中提供。</p> <p>您需要<code>box-sizing: border-box;</code>申请<code>.body</code> <code><div></code>和<code>textarea</code>。</p> <hr> <p><strong>修改后的代码</strong></p> <p></p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>body { background: #121212; color: #ffffff; font-family: "Overpass", sans-serif; padding: 15px; padding-top: none; max-width: 750px; margin: 0.1em auto; } .b { font-weight: 500; } h1 { text-align: center; transition: 0.5s; } .i { font-style: italic; } body::-webkit-scrollbar { width: 1em; border-radius: 5px 0px 5px 0px; } body::-webkit-scrollbar-track { background: #121212; border: none; } body::-webkit-scrollbar-thumb { border-radius: 5px; background-image: -webkit-linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%); } select { font-family: 'Overpass', sans-serif; font-size: 1em; background: rgb(20, 20, 20); border: none; color: #ffffff; padding: 4px; border-radius: 5px; transition: 0.5s; } .button { font-family: 'Overpass', sans-serif; font-size: 1em; background: rgb(20, 20, 20); border: none; color: #ffffff; padding: 4px; border-radius: 5px; transition: 0.5s; } ::selection { background: rgba(128, 204, 95, 0.5); } -moz-::selection { background: rgba(128, 204, 95, 0.5); } .body { border-radius: 5px; padding: 8px; border: none; box-sizing: border-box; } a { color: #ffffff; background-color: rgba(7, 7, 7, 0); text-decoration: none; border-radius: 3px; padding: 2px; transition: 0.5s; } a:hover { color: rgb(7, 7, 7); background-color: #ffffff; } textarea { display: block; font-family: 'Overpass Mono', sans-serif; border-radius: 5px; background: rgb(30, 30, 30); color: #ffffff; border: none; resize: none; transition: 0.5s; padding: 5px; margin: 0.5vw auto; box-sizing: border-box; } a.inline { text-decoration: underline; } select:hover { background-color: rgb(50, 50, 50); color: white; } a.b { padding: 0px; } .fullloader { background-color: #ffffff; position: fixed; height: 100%; width: 0%; float: left; margin: 0%; } .body::-webkit-scrollbar { width: 1em; border-radius: 0px 10px 10px 0px; } .body::-webkit-scrollbar-track { background: none; border: none; } .body::-webkit-scrollbar-thumb { border-radius: 5px; background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%); } .body::selection { background: rgba(82, 83, 170, 0.5); } -moz-.body::selection { background: rgba(82, 83, 170, 0.5); } textarea:hover { background-color: rgb(50, 50, 50); } .button:hover, input:hover { background-color: rgb(50, 50, 50); color: white; } input { font-family: 'Overpass', sans-serif; font-size: 1em; background: rgb(30, 30, 30); border: none; color: #ffffff; padding: 4px; border-radius: 5px; transition: 0.5s; } div#divhtml { transition: 0.5s; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css2?family=Overpass+Mono&family=Overpass:ital,wght@0,300;0,400;1,300;1,400&display=swap" rel="stylesheet"> <h1>Lorem Ipsum Dolor</h1> <div style='height:42vw;padding:10px;max-width:725px;margin:0.01em auto;text-align:center;justify-content:center;'> <textarea id='txthtml' rows='15' style='width:85vw;height:40vw;max-width:725px;'></textarea><br> <div style='border-radius:5px;width:85vw;max-width:725px;margin:0.05vw auto;overflow:none;'> <div id='divhtml' class='body' style='width:inherit;max-width:725px;background:#888888;padding:5px;overflow:auto;margin:0.01em auto;height:50vw;'> </div> </div> <br> <div style='text-align:left;max-width:725px;margin:0.01em auto;'> <div style='position:inherit;'> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at lacus laoreet, ultricies mi gravida, auctor mi. Maecenas sed malesuada magna. Donec vitae placerat quam, eu auctor metus. Aenean sit amet porttitor dolor. Suspendisse ligula mauris, lobortis sed laoreet vel, auctor ut diam. Aenean consequat eget metus at gravida. Suspendisse laoreet sem a vestibulum fermentum.<br><br>Ut ornare, tortor nec imperdiet pulvinar, erat enim sollicitudin orci, ut sollicitudin lectus dolor ac odio. Nullam eros ex, sollicitudin eu lacinia ac, vehicula non sapien. Quisque et odio eget erat pharetra placerat non at tortor. Vestibulum eu gravida justo. Integer auctor turpis vitae augue finibus volutpat. In vitae mollis leo, in facilisis neque. Donec viverra ex leo. Donec facilisis at purus ullamcorper vulputate. Nam a turpis ac leo tincidunt volutpat a et metus.</span> </div> <br> </div> </div></code></pre> </div> </div> <p></p> </div> <div class="clear"></div> </div> <hr> <h3>推荐阅读</h3> <ul> <li><a href="/question/55804235.html">c++ - 如何使数组调用另一个类中的函数</a></li><li><a href="/question/55804236.html">swift - 将整行附加到二维数组</a></li><li><a href="/question/55804239.html">python - 在 Python 中初始化对象类时是否应该运行函数？</a></li><li><a href="/question/55804241.html">wpf - 如何在 Xaml 中同时设置动态和静态资源？</a></li><li><a href="/question/55804248.html">ruby-on-rails - 需要其他宝石的宝石（宝石依赖问题）</a></li><li><a href="/question/55804249.html">objective-c - AFNetworkReachabilityManager：如果我设置 setReachabilityChangeBlock 两次或更多次会发生什么？</a></li><li><a href="/question/55804251.html">eclipse - 如何将下面提到的代码修复到 Eclipse 中以滚动移动应用程序？</a></li><li><a href="/question/55804256.html">flume - Flume hdfs sink 继续制作 .tmp 文件</a></li><li><a href="/question/55804259.html">python - 看门狗和 matplotlib：当目录中有新文件时处理图像并显示结果</a></li><li><a href="/question/55804260.html">ios - AWSCognito/DynamoDB 问题（未经身份验证的访问 - 不支持）</a></li> </ul> </div> <footer> <p><a href="/">时间戳在线转换</a></p> </footer> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6117966252207595" crossorigin="anonymous"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7145e10314e5e27e886ad54be2aeb067"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body></html>