[英]How do I move my bullet list to the center while having them vertically aligned in CSS?
I'm not sure what I did wrong but the bullet points on the unordered lists are shifted to the far left of the page while the contents remain in the center.我不确定我做错了什么,但无序列表上的项目符号点移动到页面的最左侧,而内容仍然在中心。 What's the best way to move the bullet points back to the center while having them vertically aligned so they don't look unorganized?
将项目符号点移回中心同时使它们垂直对齐以使它们看起来没有组织的最佳方法是什么?
Here's a link to my codepen project:这是我的 codepen 项目的链接:
https://codepen.io/danielanggggg/pen/LYjwOer https://codepen.io/danielanggggg/pen/LYjwOer
HTML HTML
#welcome-section { width: 100%; height: 100vh; top: 10vw; left: 2vw; display: block; margin-top: 10rem; text-align: center; } #navbar { position: fixed; top: 0px; width: 100%; display: flex; justify-content: center; font-size: 20px; background-color: grey; }
<section id="welcome-section"> <h1>Daniel Ang</h1> <h3>Freelance Copywriter</h3> <p>Hi there. I'm Daniel. I specialize in direct-response copywriting. I believe you are looking<br> for a copywriter to increase your conversion rate and ultimately sell your products or services:</p> <p>I specialize in writing,</p> <ul> <li>Emails</li> <li>Landing Pages</li> <li>Sales Letters</li> <li>Product Descriptions</li> <li>Facebook/Instagram Ads</li> </ul> <p>If you need any of the services above, please don't hesitate to reach out!</p> </section>
I add below code and fixed!我添加下面的代码并修复!
ul{
width: 20%;
margin: 0 auto;
}
You can change width as much as you want or use width: max-content;
您可以根据需要更改宽度或使用
width: max-content;
. .
#welcome-section { width: 100%; height: 100vh; top: 10vw; left: 2vw; display: block; margin-top: 10rem; text-align: center; } #navbar { position: fixed; top: 0px; width: 100%; display: flex; justify-content: center; font-size: 20px; background-color: grey; } ul { width: 20%; margin: 0 auto; }
<section id="welcome-section"> <h1>Daniel Ang</h1> <h3>Freelance Copywriter</h3> <p>Hi there. I'm Daniel. I specialize in direct-response copywriting. I believe you are looking<br> for a copywriter to increase your conversion rate and ultimately sell your products or services:</p> <p>I specialize in writing,</p> <ul> <li>Emails</li> <li>Landing Pages</li> <li>Sales Letters</li> <li>Product Descriptions</li> <li>Facebook/Instagram Ads</li> </ul> <p>If you need any of the services above, please don't hesitate to reach out!</p> </section>
Another aproach is to try to use Flex - Bootstrap in order to achieve this.另一种方法是尝试使用Flex - Bootstrap来实现这一点。 If you have not installed it yet, feel free to do it, because it is going to help you a lot.
如果您还没有安装它,请随意安装它,因为它会对您有很大帮助。 I would include the list inside div classes, as shown below:
我会将列表包含在 div 类中,如下所示:
<div class="d-flex flex-sm-row" >
<div class="d-flex justify-content-center d-flex align-items-end flex-fill">
<ul>
<li>
...
</li>
</ul>
</div>
</div>
You could use a flex box with column direction to get what you want without specifying a width for your bullet list.您可以使用具有列方向的弹性框来获得所需的内容,而无需为项目符号列表指定宽度。
#welcome-section { width: 100%; /* height is changed to min-height so the actual height will still be calculated based on content when 100vh is smaller than the height of your content */ min-height: 100vh; top: 10vw; left: 2vw; margin-top: 10rem; display: flex; flex-direction: column; align-items: center; }
https://codepen.io/fredns/pen/QWqNLOb https://codepen.io/fredns/pen/QWqNLOb
wrap ul
in div and use css as below:将
ul
包装在 div 中并使用 css 如下:
#welcome-section { width: 100%; height: 100vh; top: 10vw; left: 2vw; display: block; margin-top: 10rem; text-align: center; } #navbar { position: fixed; top: 0px; width: 100%; display: flex; justify-content: center; font-size: 20px; background-color: grey; }.wrap{ display:flex } ul{ margin:auto; }
<section id="welcome-section"> <h1>Daniel Ang</h1> <h3>Freelance Copywriter</h3> <p>Hi there. I'm Daniel. I specialize in direct-response copywriting. I believe you are looking<br> for a copywriter to increase your conversion rate and ultimately sell your products or services:</p> <p>I specialize in writing,</p> <div class="wrap"> <ul> <li>Emails</li> <li>Landing Pages</li> <li>Sales Letters</li> <li>Product Descriptions</li> <li>Facebook/Instagram Ads</li> </ul> </div> <p>If you need any of the services above, please don't hesitate to reach out!</p> </section>
You can add following CSS
for ul
and li
and this will solve your issue.您可以为
ul
和li
添加以下CSS
,这将解决您的问题。
ul li {
text-align: left;
}
ul {
width: fit-content;
margin: auto;
}
So your complete code will be;所以你的完整代码将是;
#welcome-section { width: 100%; height: 100vh; top: 10vw; left: 2vw; display: block; margin-top: 10rem; text-align: center; } #navbar { position: fixed; top: 0px; width: 100%; display: flex; justify-content: center; font-size: 20px; background-color: grey; } ul li { text-align: left; } ul { width: fit-content; margin: auto; }
<section id="welcome-section"> <h1>Daniel Ang</h1> <h3>Freelance Copywriter</h3> <p>Hi there. I'm Daniel. I specialize in direct-response copywriting. I believe you are looking<br> for a copywriter to increase your conversion rate and ultimately sell your products or services:</p> <p>I specialize in writing,</p> <ul> <li>Emails</li> <li>Landing Pages</li> <li>Sales Letters</li> <li>Product Descriptions</li> <li>Facebook/Instagram Ads</li> </ul> <p>If you need any of the services above, please don't hesitate to reach out!</p> </section>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.