如何將浮動元素與容器中心對齊
[英]How to Align Floating Element to Centre of Container
問題描述
我正在學習前端開發。
我想在容器中間對齊矩陣和右側列。 我該怎么做呢？
我創建了以下內容（它是在反應中制作的，但這是原始 html）：
我想有一種方法可以用 HTML 和 CSS 來做到這一點，但我不確定如何去做。 我嘗試將事物居中，但似乎不起作用。
<html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="/logo192.png" /> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> <link rel="manifest" href="/manifest.json" /> <!-- Notice the use of in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>React App</title> <style type="text/css"> body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } </style> <style type="text/css"> .App { text-align: center; width: 500px; margin: auto; } .matrix { float: left; display: grid; /* grid-template-columns: auto auto auto; */ /* background-color: #2196f3; */ padding: 10px; } .matrix-component { border-width: thin; border-style: solid; border-color: black; width: 50px; height: 50px; } .rhs { display: grid; padding: 10px; /* float: right; */ } .content { background: grey; } </style> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"> <div class="App"> <div class="content"> <div>rows: <input />cols: <input /></div> <div class="matrix"> <div> <input class="matrix-component" id="0" value="" /><input class="matrix-component" id="1" value="" /><input class="matrix-component" id="2" value="" /> </div> <div> <input class="matrix-component" id="3" value="" /><input class="matrix-component" id="4" value="" /><input class="matrix-component" id="5" value="" /> </div> <div> <input class="matrix-component" id="6" value="" /><input class="matrix-component" id="7" value="" /><input class="matrix-component" id="8" value="" /> </div> </div> <div class="rhs"> <input class="matrix-component" id="rhs0" value="" /><input class="matrix-component" id="rhs1" value="" /><input class="matrix-component" id="rhs2" value="" /> </div> </div> </div> </div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> <script src="/static/js/bundle.js"></script> <script src="/static/js/0.chunk.js"></script> <script src="/static/js/main.chunk.js"></script> <script src="/main.65e0a7c3d67e68d31704.hot-update.js"></script> </body> </html>
任何幫助深表感謝！
1 個解決方案
解決方案1
1 2020-08-25 21:03:18
如今（在我看來）實現這種事情的最佳方法是使用彈性盒。 所以要完成您正在尋找的內容，請使用彈性框。 這是css的一個實現。
首先讓我們像這樣在你的 html 中將每個列元素組合在一起。
<div class="new-div">
<div>rows: <input />cols: <input /></div>
</div>
<div class="new-div2">
<div class="matrix">
<div>
<input class="matrix-component" id="0" value="" /><input
class="matrix-component"
id="1"
value=""
/><input class="matrix-component" id="2" value="" />
</div>
<div>
<input class="matrix-component" id="3" value="" /><input
class="matrix-component"
id="4"
value=""
/><input class="matrix-component" id="5" value="" />
</div>
<div>
<input class="matrix-component" id="6" value="" /><input
class="matrix-component"
id="7"
value=""
/><input class="matrix-component" id="8" value="" />
</div>
</div>
<div class="rhs">
<input class="matrix-component" id="rhs0" value="" /><input
class="matrix-component"
id="rhs1"
value=""
/><input class="matrix-component" id="rhs2" value="" />
</div>
</div>
那么這個css應該可以解決問題。
.content{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
告訴我這是否能解決您的問題。 您可以在此處閱讀有關 flex-box 的更多信息。 這是此解決方案的現場演示https://codepen.io/hileamlak/pen/bGpqLgb
如何讓主div容器與中心對齊？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.