Centering 3 buttons within div on the page using CSS

huangapple
go评论109阅读模式
英文:

Centering 3 buttons within div on the page using CSS

问题

我有3个按钮，我想让它们始终位于页面中央，但随着窗口变宽，按钮会偏离中央（如图所示）。

如何编写HTML/CSS以解决此问题，使它们始终保持完全居中？

似乎它偏向左边，留下了右边的多余空间。

Centering 3 buttons within div on the page using CSS

  1. 	<body>
  2. 		<h1 class="title">Creative Checker</h1>
  3. 		<div class="row">
  4. 			<div class="col-12 col-md-10 offset-md-1">
  5. 				<div class="alert alert-success" style="display: none">
  6. 				</div>
  7. 				<div class="alert alert-danger" style="display: none">
  8. 				</div>
  9. 				<div class="row">
  10. 					<div class="col-md-12">
  11. 						<p class="text-center">
  12. 							1. 选择产品类型：
  13. 						</p>
  14. 					</div>
  15. 				</div>
  16. 				<div class="row mb-3">
  17. 					<div class="col-lg-4">
  18. 						<button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">Snapshot</button>
  19. 					</div>
  20. 					<div class="col-lg-4">
  21. 						<button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>
  22. 					</div>
  23. 					<div class="col-lg-4">
  24. 						<button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">Behavioural Push</button>
  25. 					</div>
  26. 				</div>
  27. 				<div class="row">					
  28. 					<div class="col-lg-12">
  29. 						<p class="text-center">
  30. 							2. 上传文件夹/图片：
  31. 						</p>
  32. 						<form action="server.php"
  33. 							class="dropzone"
  34. 							id="my-awesome-dropzone"
  35. 							onsubmit="onSubmit()">
  36. 						</form>
  37. 					</div>
  38. 				</div>			
  39. 			</div>	
  40. 		</div>
  1. #btn-snapshot {
  2.     z-index: 39;
  3.     width: 250px;
  4.     min-height: 15px;
  5.     background-color: #75ACE0;
  6.     border-radius: 20px;
  7.     position: relative;
  8. }
  10. #btn-tmd {
  11.   	z-index: 39;
  12.     width: 250px;
  13.     min-height: 15px;
  14.     background-color: #75ACE0;
  15.     border-radius: 20px;
  16.     position: relative;
  17. }
  19. #btn-bpush {
  20.   	z-index: 39;
  21.     width: 250px;
  22.     min-height: 15px;
  23.     background-color: #75ACE0;
  24.     border-radius: 20px;
  25.     position: relative;
  26. }
英文:

I have 3 buttons that I'm looking to keep central on the page, however as the window gets wider the buttons skew off from central (shown in image).

What would be the HTML/CSS to fix this so that they are always perfectly central?

It seems as if it is skewing more to the left, leaving extra space on the right.

Centering 3 buttons within div on the page using CSS

  1. 	&lt;body&gt;
  2. 		&lt;h1 class=&quot;title&quot;&gt;Creative Checker&lt;/h1&gt;
  3. 		&lt;div class=&quot;row&quot;&gt;
  4. 			&lt;div class=&quot;col-12 col-md-10 offset-md-1&quot;&gt;
  5. 				&lt;div class=&quot;alert alert-success&quot; style=&quot;display: none&quot;&gt;
  6. 				&lt;/div&gt;
  7. 				&lt;div class=&quot;alert alert-danger&quot; style=&quot;display: none&quot;&gt;
  8. 				&lt;/div&gt;
  9. 				&lt;div class=&quot;row&quot;&gt;
  10. 					&lt;div class=&quot;col-md-12&quot;&gt;
  11. 						&lt;p class=&quot;text-center&quot;&gt;
  12. 							1. Select product type:
  13. 						&lt;/p&gt;
  14. 					&lt;/div&gt;
  15. 				&lt;/div&gt;
  16. 				&lt;div class=&quot;row mb-3&quot;&gt;
  17. 					&lt;div class=&quot;col-lg-4&quot;&gt;
  18. 						&lt;button type=&quot;button&quot; id=&quot;btn-snapshot&quot; class=&quot;btn btn-secondary col-lg-12&quot;&gt;Snapshot&lt;/button&gt;
  19. 					&lt;/div&gt;
  20. 					&lt;div class=&quot;col-lg-4&quot;&gt;
  21. 						&lt;button type=&quot;button&quot; id=&quot;btn-tmd&quot; class=&quot;btn btn-secondary col-lg-12&quot;&gt;TMD&lt;/button&gt;
  22. 					&lt;/div&gt;
  23. 					&lt;div class=&quot;col-lg-4&quot;&gt;
  24. 						&lt;button type=&quot;button&quot; id=&quot;btn-bpush&quot; class=&quot;btn btn-secondary col-lg-12&quot;&gt;Behavioural Push&lt;/button&gt;
  25. 					&lt;/div&gt;
  26. 				&lt;/div&gt;
  27. 				&lt;div class=&quot;row&quot;&gt;					
  28. 					&lt;div class=&quot;col-lg-12&quot;&gt;
  29. 						&lt;p class=&quot;text-center&quot;&gt;
  30. 							2. Upload folder/images:
  31. 						&lt;/p&gt;
  32. 						&lt;form action=&quot;server.php&quot;
  33. 							class=&quot;dropzone&quot;
  34. 							id=&quot;my-awesome-dropzone&quot;
  35. 							onsubmit=&quot;onSubmit()&quot;&gt;
  36. 							&lt;!-- &lt;select name=&quot;product-type&quot; id=&quot;product_type&quot;&gt;
  37. 								&lt;option value=&quot;snapshot&quot;&gt;
  38. 									Snapshot
  39. 								&lt;/option&gt;
  40. 								&lt;option value=&quot;TMD&quot;&gt;								
  41. 									TMD
  42. 								&lt;/option&gt;
  43. 								&lt;option value=&quot;b-push&quot;&gt;
  44. 									Behavioural Push
  45. 								&lt;/option&gt;
  46. 							&lt;/select&gt; --&gt;						
  47. 						&lt;/form&gt;
  48. 					&lt;/div&gt;
  49. 				&lt;/div&gt;			
  50. 			&lt;/div&gt;	
  51. 		&lt;/div&gt;
  1. #btn-snapshot {
  2.     z-index: 39;
  3.     width: 250px;
  4.     min-height: 15px;
  5.     background-color: #75ACE0;
  6.     border-radius: 20px;
  7.     position: relative;
  8. }
  10. #btn-tmd {
  11.   	z-index: 39;
  12.     width: 250px;
  13.     min-height: 15px;
  14.     background-color: #75ACE0;
  15.     border-radius: 20px;
  16.     position: relative;
  17. }
  19. #btn-bpush {
  20.   	z-index: 39;
  21.     width: 250px;
  22.     min-height: 15px;
  23.     background-color: #75ACE0;
  24.     border-radius: 20px;
  25.     position: relative;
  26. }

答案1

得分: 2

将类名text-center添加到col-lg-4，按钮将居中显示。

如果没有使用Bootstrap，请将以下CSS代码添加到您的文件中。

  1. .text-center {
  2.     text-align: center;
  3. }
英文:

Add the class text-center to col-lg-4 and the button will be centered.

If bootstrap is not available, add the following CSS code to your file.

  1. .text-center{
  2.     text-align: center;
  3. }

答案2

得分: 0

你是否看起来像这样？

  1. .row {
  2.   display: flex;
  3.   justify-content: center;
  4.   flex-flow: row wrap;
  5.   align-items: center;
  6. }
  7. .btn {
  8.   color: white;
  9.   background: #45C9F8;
  10.   border: none;
  11.   padding: 8px 40px;
  12.   border-radius: 50px;
  13. }
  1. <div class="row mb-3">
  2.     <div class="col-lg-4">
  3.         <button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">快照</button>
  4.     </div>
  5.     <div class="col-lg-4">
  6.         <button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>
  7.     </div>
  8.     <div class="col-lg-4">
  9.         <button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">行为推送</button>
  10.     </div>
  11. </div>
英文:

Are you looking like this?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .row {
  2.   display: flex;
  3.   justify-content: center;
  4.   flex-flow: row wrap;
  5.   align-items: center;
  6. }
  7. .btn {
  8.   color: white;
  9.   background: #45C9F8;
  10.   border: none;
  11.   padding: 8px 40px;
  12.   border-radius: 50px;
  13. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;row mb-3&quot;&gt;
  2.     &lt;div class=&quot;col-lg-4&quot;&gt;
  3.         &lt;button type=&quot;button&quot; id=&quot;btn-snapshot&quot; class=&quot;btn btn-secondary col-lg-12&quot;&gt;Snapshot&lt;/button&gt;
  4.     &lt;/div&gt;
  5.     &lt;div class=&quot;col-lg-4&quot;&gt;
  6.         &lt;button type=&quot;button&quot; id=&quot;btn-tmd&quot; class=&quot;btn btn-secondary col-lg-12&quot;&gt;TMD&lt;/button&gt;
  7.     &lt;/div&gt;
  8.     &lt;div class=&quot;col-lg-4&quot;&gt;
  9.         &lt;button type=&quot;button&quot; id=&quot;btn-bpush&quot; class=&quot;btn btn-secondary col-lg-12&quot;&gt;Behavioural Push&lt;/button&gt;
  10.         &lt;/div&gt;
  11. &lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

单从目前提供的信息来看，我只能建议确保 class row mb-3 设置为 100% 的宽度。

  1. .row mb-3 {
  2.   width: 100%;
  3. }

如果这不能解决您的问题，请发布您的 CSS 代码，以便我们查看您已应用的样式。这将有助于更容易地进行故障排除。

英文:

Purely from the information given at the moment I can only suggest ensuring that the class row mb-3 is set at 100% width.

  1. .row mb-3 {
  2.   width: 100%;
  3. }

If this doesn't fix your issue, post your CSS code so we can see what styles you have applied. It'll make troubleshooting easier.

答案4

得分: 0

HTML代码：

  1. <div class="container">
  2.   <div class="row">
  3.     <div class="col">
  4.       <button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">Snapshot</button>
  5.     </div>
  6.     <div class="col">
  7.       <button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>
  8.     </div>
  9.     <div class="col">
  10.       <button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">Behavioural Push</button>
  11.     </div>
  12.   </div>
  13. </div>

CSS：

  1. .row {
  2.   background: #f8f9fa;
  3.   margin-top: 20px;
  4. }
  6. .col {
  7.   border: solid 0px #6c757d;
  8.   padding: 10px;
  9. }

这是相同内容的工作Bootstrap示例链接：链接。

英文:

HTML code:
&lt;div class=&quot;container&quot;&gt;

&lt;div class=&quot;row&quot;&gt;

&lt;div class=&quot;col&quot;&gt;

  1. ` &lt;button type=&quot;button&quot; id=&quot;btn-snapshot&quot; class=&quot;btn btn-secondary col-lg-12&quot;&gt;Snapshot&lt;/button&gt;`

&lt;/div&gt;

&lt;div class=&quot;col&quot;&gt;

  1.  ` &lt;button type=&quot;button&quot; id=&quot;btn-tmd&quot; class=&quot;btn btn-secondary col-lg-12&quot;&gt;TMD&lt;/button&gt;`

&lt;/div&gt;

  1. `&lt;div class=&quot;col&quot;&gt;`
  3.   `&lt;button type=&quot;button&quot; id=&quot;btn-bpush&quot; class=&quot;btn btn-secondary col-lg-12&quot;&gt;Behavioural Push&lt;/button&gt;`

&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;

CSS:

.row {
background: #f8f9fa;
margin-top: 20px;
}

.col {
border: solid 0px #6c757d;
padding: 10px;
}

Here is a working bootstrap fiddle a link for the same.

huangapple
  • 本文由 发表于 2020年1月3日 19:32:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/59577881.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定