英文:
Centering some buttons
问题
<section class="mainContent"><button id="result">结果</button><button id="clear">C</button><button id="one">1</button><button id="two">2</button><button id="three">3</button><button id="four">4</button><button id="five">5</button><button id="six">6</button><button id="seven">7</button><button id="eight">8</button><button id="nine">9</button><button id="zero">0</button><button id="plus">+</button><button id="minus">-</button><button id="multiply">*</button><button id="divide">/</button><button id="equal">=</button><button id="comma">,</button><input type="text" placeholder="您的计算"></section>
英文:
I am a beginner-ish front end Developer, and I have done something with my css stylesheet that whatever I do I cant seem to get my buttons on the page to be aligned as if it was a calculator? I know many of you would know this so, thank you for your help forward.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.mainContent button {font-family: inherit;padding: 1em 2em;border: 3px solid black;width: 2em;background-color: #edf2fb;color: black;border-radius: 0.35em;font-size: 1.2em;margin: 0.1em auto;display: flex;justify-content: center;}
<!-- language: lang-html -->
<section class="mainContent"><button id="result">Result</button><button id="clear">C</button><button id="one">1</button><button id="two">2</button><button id="three">3</button><button id="four">4</button><button id="five">5</button><button id="six">6</button><button id="seven">7</button><button id="eight">8</button><button id="nine">9</button><button id="zero">0</button><button id="plus">+</button><button id="minus">-</button><button id="multiply">*</button><button id="divide">/</button><button id="equal">=</button><button id="comma">,</button><input type="text" placeholder="Your calculations"></section>
<!-- end snippet -->
How do you do this? They are just lined up in the center one by one going down!
I tried all this justify content, text align, grid but I cant seem to get any to work
答案1
得分: 3
你可以使用display:grid;和grid-template-columns属性来对mainContent类进行设置，以正确对齐按钮。此外，我将input元素放入具有calculation类的不同div中，并为其提供了内联CSS值。最后，我添加了display:flex;和justify-content:center;属性，以使input元素（.calculation类）居中对齐。希望对您有帮助。
英文:
You can use display:grid; and grid-template-columns attribute to mainContent class not to .mainContent button class for aligning the buttons properly. Additionally i put the input element in to the different div which has calculation class and i gave it inline css values. Finally added display:flex; and justify-content:center; attributes for aligning the input element (.calculation class) to the center. I hope it works for you.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.mainContent button {font-family: inherit;padding: 1em 2em;border: 3px solid black;background-color: #edf2fb;color: black;border-radius: 0.35em;font-size: 1.2em;display: block;margin: 0.1em;}.mainContent {display: grid;grid-template-columns: auto auto auto auto;justify-content: center;}.calculation {display: flex;justify-content: center;}
<!-- language: lang-html -->
<div class="calculation"><input style="width: 410px; height: 60px;" type="text" placeholder="Your calculations"></div><section class="mainContent"><button id="result">Result</button><button id="clear">C</button><button id="one">1</button><button id="two">2</button><button id="three">3</button><button id="four">4</button><button id="five">5</button><button id="six">6</button><button id="seven">7</button><button id="eight">8</button><button id="nine">9</button><button id="zero">0</button><button id="plus">+</button><button id="minus">-</button><button id="multiply">*</button><button id="divide">/</button><button id="equal">=</button><button id="comma">,</button></section>
<!-- end snippet -->
答案2
得分: 0
以下是您提供的代码的中文翻译：
.mainContent button {font-family: inherit;border: 3px solid black;padding: 25px;margin: 10px;width: 10em;background-color: #edf2fb;color: black;border-radius: 0.35em;font-size: 1.2em;text-align: center;}.mainContent {display: flex;justify-content: center;flex-wrap: wrap;}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>浏览器</title></head><body><input type="text" placeholder="您的计算"><section class="mainContent"><button id="result">结果</button><button id="clear">C</button><button id="one">1</button><button id="two">2</button><button id="three">3</button><button id="four">4</button><button id="five">5</button><button id="six">6</button><button id="seven">7</button><button id="eight">8</button><button id="nine">9</button><button id="zero">0</button><button id="plus">+</button><button id="minus">-</button><button id="multiply">*</button><button id="divide">/</button><button id="equal">=</button><button id="comma">,</button></section><script src="script.js"></script></body></html>
希望这能帮助您！
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.mainContent button {font-family: inherit;border: 3px solid black;padding: 25px;margin: 10px;width: 10em;background-color: #edf2fb;color: black;border-radius: 0.35em;font-size: 1.2em;text-align: center;}.mainContent {display: flex;justify-content: center;flex-wrap: wrap;}
<!-- language: lang-html -->
<!--Online HTML, CSS and JavaScript editor to run code online.--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>Browser</title></head><body><input type="text" placeholder="Your calculations"><section class="mainContent"><button id="result">Result</button><button id="clear">C</button><button id="one">1</button><button id="two">2</button><button id="three">3</button><button id="four">4</button><button id="five">5</button><button id="six">6</button><button id="seven">7</button><button id="eight">8</button><button id="nine">9</button><button id="zero">0</button><button id="plus">+</button><button id="minus">-</button><button id="multiply">*</button><button id="divide">/</button><button id="equal">=</button><button id="comma">,</button></section><script src="script.js"></script></body></html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论