CSS按钮对齐问题

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

CSS Buttons align issue

问题

  1. .btn-prev, .btn-next {
  2.     width: 40px;
  3.     height: 40px;
  4.     background: rgba(255, 255, 255, 0.7);
  5.     display: inline-block;
  6.     border: none;
  7.     line-height: 40px;
  8.     margin: 0 auto;
  9.     top: 30%;
  10.     z-index: 2;
  11.     font-size: 30px;
  12.     font-weight: bold;
  13.     border-radius: 50%;
  14.     font-family: monospace;
  15.     cursor: pointer;
  16. }
  18. .btn-prev:hover, .btn-next:hover {
  19.     background: rgb(238, 236, 236);
  20. }
  22. .btn-prev {
  23.     left: 10%;
  24.     margin: 0 auto;
  25.     text-align: center;
  26.     border: none;
  27. }
  29. .btn-next {
  30.     right: 10%;
  31.     margin: 0 auto;
  32.     text-align: center;
  33.     border: none;
  34. }
  1. <section>
  2.     <div id="btn-prev" class="btn-prev">&#60;</div>
  3.     <div id="btn-next" class="btn-next">&#62;</div>
  4.     <div class="center_part">
  5.         <div class="zoom">
  6.         </div><br><br>
  7.         <button class="button btnleer">Leer</button>
  8.     </div>
  9. </section>

(Note: I have removed the unnecessary auto values from the left and right properties in the CSS to center the buttons, as per your request.)

英文:

I was making this web page (I am a beginner in CSS), and I was wondering if anyone could help me to put the buttons aside of the blue box thingy

  1. .btn-prev, .btn-next {
  2.     width: 40px;
  3.     height: 40px;
  4.     background: rgba(255, 255, 255, 0.7);
  5.     display: inline-block;
  6.     border: none;
  7.     line-height: 40px;
  8.     margin: 0 auto;
  9.     top: 30%;
  10.     z-index: 2;
  11.     font-size: 30px;
  12.     font-weight: bold;
  13.     border-radius: 50%;
  14.     font-family: monospace;
  15.     cursor: pointer;
  16.   }
  17.   
  18.   .btn-prev:hover, .btn-next:hover {
  19.     background: rgb(238, 236, 236);
  20.   }
  21.   
  22.   .btn-prev {
  23.     left: 10% auto;
  24.     right: 80%;
  25.     margin: 0 auto;
  26.     text-align: center;
  27.     border: none;
  28.     
  29.   }
  30.   
  31.   .btn-next {
  32.     right: 10% auto;
  33.     left: 80%;
  34.     margin: 0 auto;
  35.     text-align: center;
  36.     border: none;
  37.   }

as y'all can see it's a bit of a mess because I was messing around and could use some help.

here is what it looks like
result
and I want the buttons aside from the blue box and centered in the middle, not flexed because it would f- up the position as I want it to move aside from the window, help 😥
needed result
here is how I would (theoretically) want it to look like, without further saying, thank you 😁

EDIT:
I will add the HTML for y'all to see

  1. &lt;section&gt;
  2.     &lt;div id=&quot;btn-prev&quot; class=&quot;btn-prev&quot;&gt;&amp;#60;&lt;/div&gt;
  3.     &lt;div id=&quot;btn-next&quot; class=&quot;btn-next&quot;&gt;&amp;#62;&lt;/div&gt;
  4.     &lt;div class=&quot;center_part&quot;&gt;
  5.       &lt;div class=&quot;zoom&quot;&gt;
  6.    &lt;/div&gt;&lt;br&gt;&lt;br&gt;
  7.     &lt;button class=&quot;button btnleer&quot;&gt;Leer&lt;/button&gt;
  8.   &lt;/div&gt;
  9.   &lt;/section&gt;

I didn't put all the html, just the section where the buttons are 🫠

答案1

得分: 1

.center_part {
position: relative;
text-align: center;
}

.btn-prev,
.btn-next {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.7);
display: inline-block;
border: none;
line-height: 40px;
z-index: 2;
font-size: 30px;
font-weight: bold;
border-radius: 50%;
font-family: monospace;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
}

.btn-prev {
left: 10px;
}

.btn-next {
right: 10px;
}

.btn-prev:hover,
.btn-next:hover {
background: rgb(238, 236, 236);
}

英文: 
  1. .center_part {
  2.   position: relative;
  3.   text-align: center;
  4. }
  6. .btn-prev,
  7. .btn-next {
  8.   width: 40px;
  9.   height: 40px;
  10.   background: rgba(255, 255, 255, 0.7);
  11.   display: inline-block;
  12.   border: none;
  13.   line-height: 40px;
  14.   z-index: 2;
  15.   font-size: 30px;
  16.   font-weight: bold;
  17.   border-radius: 50%;
  18.   font-family: monospace;
  19.   cursor: pointer;
  20.   position: absolute;
  21.   top: 50%;
  22.   transform: translateY(-50%);
  23. }
  25. .btn-prev {
  26.   left: 10px;
  27. }
  29. .btn-next {
  30.   right: 10px;
  31. }
  33. .btn-prev:hover,
  34. .btn-next:hover {
  35.   background: rgb(238, 236, 236);
  36. }

I'm a noob in HTML, but I guess this may help

答案2

得分: 0

以下是代码的中文翻译：

将主要的 div（带有蓝色背景色的 div）设为相对位置，同时将按钮都设为绝对位置，可以根据需要相应地更改左右位置来设置按钮。

  1. .btn-prev, .btn-next {
  2.     position: absolute;
  3.     width: 40px;
  4.     height: 40px;
  5.     background: rgba(255, 255, 255, 0.7);
  6.     display: inline-block;
  7.     border: none;
  8.     line-height: 40px;
  9.     margin: 0 auto;
  10.     top: 30%;
  11.     z-index: 2;
  12.     font-size: 30px;
  13.     font-weight: bold;
  14.     border-radius: 50%;
  15.     font-family: monospace;
  16.     cursor: pointer;
  17. }
  19. .btn-prev:hover, .btn-next:hover {
  20.     background: rgb(238, 236, 236);
  21. }
  23. .btn-prev {
  24.     left: 10% auto;
  25.     right: 100%;
  26.     margin: 0 auto;
  27.     text-align: center;
  28.     border: none;
  29. }
  31. .btn-next {
  32.     right: 10% auto;
  33.     left: 100%;
  34.     margin: 0 auto;
  35.     text-align: center;
  36.     border: none;
  37. }
英文:

Giving the main div(the div with blue blackground-color) position relative and both the button position absolute can set the button by changing the left right position accordingly as you want.

  1. .btn-prev, .btn-next {
  2.         position:absolute;
  3.         width: 40px;
  4.         height: 40px;
  5.         background: rgba(255, 255, 255, 0.7);
  6.         display: inline-block;
  7.         border: none;
  8.         line-height: 40px;
  9.         margin: 0 auto;
  10.         top: 30%;
  11.         z-index: 2;
  12.         font-size: 30px;
  13.         font-weight: bold;
  14.         border-radius: 50%;
  15.         font-family: monospace;
  16.         cursor: pointer;
  17.       }
  18.       
  19.       .btn-prev:hover, .btn-next:hover {
  20.         background: rgb(238, 236, 236);
  21.       }
  22.       
  23.       .btn-prev {
  24.         left: 10% auto;
  25.         right: 100%;
  26.         margin: 0 auto;
  27.         text-align: center;
  28.         border: none;
  29.         
  30.       }
  31.       
  32.       .btn-next {
  33.         right: 10% auto;
  34.         left: 100%;
  35.         margin: 0 auto;
  36.         text-align: center;
  37.         border: none;
  38.       }

答案3

得分: 0

只需使用flex来将您的内容排成一行。您需要在HTML中移动一个按钮。但您将获得您想要的效果。比使用绝对定位要好得多，后者需要更多的包装元素来包含。

  1. section {
  2.   display: flex;
  3.   flex-direction: row;
  4. }
英文:

Just use flex to align your content into a row. You'll have to move a button in the HTML around. But you'll get the effect you want. Much better than using position absolute which would need more wrapping elements to contain.

  1. section {
  2.   display: flex;
  3.   flex-direction: row;
  4. }
  1. &lt;section&gt;
  2.   &lt;div id=&quot;btn-prev&quot; class=&quot;btn-prev&quot;&gt;&amp;#60;&lt;/div&gt;
  3.   &lt;div class=&quot;center_part&quot;&gt;
  4.     &lt;div class=&quot;zoom&quot;&gt;&lt;/div&gt;
  5.     &lt;br&gt;&lt;br&gt;
  6.     &lt;button class=&quot;button btnleer&quot;&gt;Leer&lt;/button&gt;
  7.   &lt;/div&gt;
  8.   &lt;div id=&quot;btn-next&quot; class=&quot;btn-next&quot;&gt;&amp;#62;&lt;/div&gt;
  9. &lt;/section&gt;

答案4

得分: 0

据我所知，如果您想让HTML元素水平排列，可以使用flex容器和flex项目。尝试在Google上搜索FlexBox。

英文:

As I know if you want to let html elements order by horizontal you can use flex container with flex item. Try to search FlexBox on Google.

huangapple
  • 本文由 发表于 2023年6月13日 12:43:11
  • 转载请务必保留本文链接：https://go.coder-hub.com/76461742.html
  • css
  • html
匿名

发表评论

匿名网友

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

确定