时间戳

首页 > 解决方案 > 在 div 中居中无序列表与
within

css - 在 div 中居中无序列表与
within

问题描述

有很多类似的问题，但没有一个完全符合我的情况，主要是因为我<br>在列表中有标签。我需要电子邮件模板的代码，因此我不能使用引导程序或类似的东西。

我只需要将社交媒体链接放在底部的中心，使它们位于页面的中心，并尽可能保持响应。这是一个小提琴 https://jsfiddle.net/w5dtvs9h/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="font-family: Arial;">
    <div style="max-width: 80%; margin: auto;">
    <div style="max-width: 100%; margin: auto;">
<a href="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"><img style="display: block; margin: auto;" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> </a> </div>
<div>Your thoughts mean a lot to us. Your reviews help us learn what we are doing well, what we need to work on, and what we can do to make your experience with Our Company even better. </div>

<div> <span style="font-weight: bold;">Step 1: Follow the links or any (OR ALL!) of the review sites below </span><br><br> 
Click the buttons below to go to that site and provide your review.</div>

<div><span style="font-weight: bold;">Give us a rating and review. </span> <br><br>
Choose a star rating and provide your comments.</div>
<h3 style="text-align: center;">THANK YOU!</h3>
<hr>

<div style="width: 100%; margin: auto;">
    <ul style="margin: auto; width: 100%;">
        <li style="float: left; list-style:none; margin: auto; margin-right:5%; "><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</li>
        <li style="float: left; list-style:none; margin: auto; margin-right:5%; "><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</li>
        <li style="float: left; list-style:none; margin: auto; margin-right:5%; "><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</li>
    </ul>
</div>
</div>
</body>
</html>

谢谢。

标签： csshtml

解决方案

您可以使用相同的布局，而无需将其更改为表格，而只需更改样式：

<div>
<ul style="margin: auto;display: flex;justify-content: center;">
    <li style="list-style:none;margin-right:5%;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</li>
    <li style="list-style:none;margin-right:5%;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</li>
    <li style="list-style:none;margin-right:5%;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50px; max-height: 50px;display: block; margin: auto;"><br> Google</li>
</ul> 
</div>

https://jsfiddle.net/w5dtvs9h/6/

推荐阅读