个人中心
gpt4 book ai didi

CSS 列表 : Centering your list text w. r.t 列表样式图像

转载 作者：行者123 更新时间：2023-11-28 07:07:50 27 4
gpt4 key购买 nike

请找到 jsfiddle 的链接

HTML:

<div>
  <ul>
    <li id="bullet">
      <span>Alerts</span>
    </li>
  </ul>
</div>

CSS:

#bullet{
    padding:0px 0px 0px 0px;
    margin: 0px 0px 0px 20px;
    list-style-image: url('https://www.imageupload.co.uk/images/2015/09/29/Alerts_icon.png');
}

我试图垂直居中对齐我的列表文本。我使用 list-style-image 为我的列表添加了一个图标，而不是标准的元素符号。

Edit1: 按照 Eden 的建议，我替换了我的代码，它几乎可以正常工作。但是，列表文本对于某些人来说太长了，当文本移动到下一行时，它是从图像/图标下方开始的。有没有一种方法可以使我的文本准确地从上一行中文本开始的位置开始？

Edit2:这是我的整个 HTML 页面:

<html>
<head>
<title>PLM</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>
<script type="text/javascript" src="listSlider.js"></script>
<script type="text/javascript" src="unslider.min.js"></script>
<SCRIPT type=text/javascript>

$(document).ready(function() {
//alert("called");   
//alert($().SPServices.SPGetCurrentSite());

var list = "Announcements";                      
var fieldsToRead = "<ViewFields><FieldRef Name='Title' /></ViewFields>";

var query="<Query></Query>";
$().SPServices({
operation: "GetListItems",
async: false, 
listName: "Announcements",
CAMLViewFields: fieldsToRead,
CAMLQuery: query,                                                                    

completefunc: function(xData, Status)
{
    $(xData.responseXML).find("z\\:row, row").each(function () 
    {
        //alert(xData.responseXML);
        var _Title = $(this).attr("ows_Title");
        //alert(_Title);
        var _Dream_x0020_Destination = $(this).attr("ows_Dream_x0020_Destination");
        var _PPP =  $(this).attr("ows_PPP");

        $("#Announcement").append("<li id='slide'>"+ _Title +"</li>");
    });
}
});

});

</script>
<link rel="stylesheet" type="text/css" href="designmypage.css">
<link rel="stylesheet" type="text/css" href="foundation.css">
</head>
<body>
<div class="container">
    <div class="main">
        <div id="content">
            <article>
            <h1 id="headalign">Product Lifecycle Management</h1>
            <p class="text">What is PLM?</p>    
            <p class="text">Product Lifecycle Management (PLM) helps manufacturers manage complex, cross-functional processes, coordinating the efforts of distributed teams to consistently and efficiently develop the best possible products.</p></article>
            <div id="water"><img src="Landing page/Watermark.png" /></div>
            <div id="chart"><img src="Landing page/Chart.png" /></div>
        </div>
        <div id="contact">
            <div id="rect">
                <p>&nbsp;&nbsp;Contacts:</p>
            </div>
            <div id="cr">
                <ul class="large-block-grid-8">
                    <li><img src="Landing page/Contacts/CassWade.png"></li>
                    <li><p id="Contact_Name_Align">Cass Wade<br/>Project Manager</p></li>
                    <li><img src="Landing page/Contacts/Meredith.png"></li>
                    <li id="align"><p id="Contact_Name_Align">Meredith<br/>HR Head</p></li>
                    <li><img src="Landing page/Contacts/Simon.png"></li>
                    <li id="align"><p id="Contact_Name_Align">Simon<br/>CEO</p></li>
                    <li><img src="Landing page/Contacts/Roger.png"></li>
                    <li id="align"><p id="Contact_Name_Align">Roger<br/>Director</p></li>
                </ul>
            <hr/>
            </div>
        </div>
    </div>

    <div class="sidebar">
        <div id="AT">
            <ul class="Alert_Icon">
                <li><img src="Landing page/Alerts_icon.png"></li>
                <li id="lefty">Alerts</li>
            </ul>
             <div id="Announcement">
            <ul id="slider"></ul></div>
            <br/><hr/>
        <div id="OPL">
            <ul class="Alert_Icon">
                <li><img src="Landing page/Trainings-OPL_icon.png"></li>
                <li id="lefty">Training & OPLs</li>
            </ul>
        </div>
        </div>

        <div id="Links">
            <p style="margin: 0px; font-size: 22pt; padding: 25px 0px 35px 25px; color: #1c3563">Quick Links</p>
            <ul class="bull">
                <li id="bullet"><a href="http://sharepoint.stackexchange.com/users/45641/yash-saraiya">Stackexchange</a></li><hr id="bullety"/>
                <li id="bullet"><a href="https://msdn.microsoft.com/en-in/">MSDN</a></li><hr id="bullety"/>
                <li id="bullet"><a href="https://www.google.co.in/?gfe_rd=cr&ei=XikKVrDpMaLv8wfLnYH4BQ">Google</a></li><hr id="bullety"/>
            </ul>
        </div>

    </div>
</div>
</body>
</html>

此处主标签的宽度为 66%，而侧边栏的宽度为 33%。目前我们实际上正在研究 div id="AT"，它占总宽度的 25% 左右。在页面的部分快照下方找到

enter image description here

在页面的 CSS 下方找到:

.container {
background-color: #bad3df;
width: 100%;
height:100%;
position:relative;
font-family: "Arial";
}

#content {    
font-size: 14pt;
left: 0%;
position: relative;
height: 75%;
width: 100%;
}

.sidebar {
position: absolute;
display: inline-block;
overflow: hidden;
width: 28%;
height: 99%;
float: right;
}

#water {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
}

.main {
display: inline-block;
overflow: hidden;
padding: 2px;
width: 70%;
height:99%;
}

#chart{
position: relative; 
margin-left: 14%;
}

#rect{
position: relative;
height: 35px;
border: px solid transparent;
background-color: #5ca3ca;
margin-left: 85px;
font-size: 22pt;
color: #FFFFFF;
}

article {
text-align: justify;   
margin-left: 85px;
}

p.text{
padding-top: 40px;
word-wrap: break-word;
}

#contact{
position: relative;
margin-top: 60px;
}

.contact-img {
padding: 40px 0px 15px 0px;
margin: 0;
position: relative;
list-style: none;
border: none;
display: flex;
padding-left: 0px;
}

.Alert_Icon {
position: relative;
list-style: none;
border: none;
margin: 0px 0px 0px 25px;
display: flex;
padding: 20px 10px 25px 0px;
color: #357ebc;
}

ul {
margin-left: 1.1rem;
}

.QL_Icon {
position: relative;
list-style: none;
border: none;
margin-bottom: 0px;
display: flex;
padding-left: 0px;
}

.contact-img li {
display: table-cell;
padding: 0px 0px 0px 0px;
vertical-align: middle;
/* margin-left: 25px; */
width: 69px;
height: 72px;
flex: 1;
}

.Alert_Icon li {
display: table-cell;
padding: 20px 10px 25px 0px;
font-size: 20pt;
vertical-align: middle;
margin-bottom: 0px;
}

.QL_Icon li {
display: table-cell;
padding: 0px 20px 12px 25px;
font-size: 20pt;
vertical-align: middle;
margin-bottom: 0px;
}

.contact-img td{
border: 1px solid red;
}

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #82adcc;
margin: 0em 0;
padding: 0;
}

#cr {
padding-top: 40px;
margin-left: 85px;
}

#AT{
margin-left: 50px;
margin-right: 40px;
height: 60%;
margin-bottom: 20px;
background-color: #FFFFFF;
}

#Links{
margin-left: 50px;
margin-right: 40px;
height: 36%;
background-color: #d8e6ed;
}

#align{
vertical-align: middle;
}

#Announcement {
position: relative;
height: 100px;
width: 190px;
/* height: 30%; */
overflow: auto;
font-size: 14pt;
text-decoration: underline;
margin-left: 25px;
margin-right: 40px;
list-style-type: none;
}

#lefty{
position: relative;
top: 10px;
display: table-cell;
padding: 20px 10px 25px 0px;
font-size: 20pt;
vertical-align: middle;
margin-bottom: 0px;
padding-left: 0px;
}

#bullet {
padding: 0px 0px 12px 0px;
margin-left: 25px;
list-style-image: url('Landing page/Bullet.png');
/* position: relative; */
left: 25px;
right: 40px;
}

.bull{
/* padding-left: 25px; */
margin-left: 25px;
margin-right: 40px;
}

#bullety {
margin: 0px;
padding: 0px 0px 12px 0px;
/* padding-bottom: 12px; */
border: solid #bac6cc;
border-width: 1px 0 0;
clear: both;
height: 0;
/* margin: 1.25rem 0 1.1875rem; */

}

#slider{
list-style-type: none;
padding: 2px;
margin: 0px;
}

p#Contact_Name_Align {
display: table-cell !important;
vertical-align: middle !important;
height: 72px !important;
}

#slide{
padding: 4px;
overflow: hidden;
}

#headalign{
position: relative;
top: 40px;
margin: 0px 0px 40px 0px;
padding: 0px;
}

a {
color: #357ebc !important;
line-height: inherit;
text-decoration: none;
}

#AlertImg{
padding:0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
list-style-type:none;
line-height:50px;
}

#AlertImg:before{
content:'';
display:inline-block;
width:50px;
height:50px;
background:url('Landing page/Alerts_icon.png');
float:left;
margin-right:10px;
}

#TOPL{
padding:0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
list-style-type:none;
line-height:50px;
}

#TOPL:before{
content:'';
display:inline-block;
width:50px;
height:50px;
background:url('https://www.imageupload.co.uk/images/2015/09/29/Trainings-OPL_icon.png');
float:left;
margin-right:10px;
}

注意:您可能会发现很多多余的 CSS，因为这是我第一次从头开始创建页面。

提前致谢!!!

最佳答案

您可以使用 CSS 伪类 :before 将您自己的图像添加到列表中:

#bullet:before{
    content:'';
    display:inline-block;
    width:50px;
    height:50px;
    background:url('https://www.imageupload.co.uk/images/2015/09/29/Alerts_icon.png');
    float:left;
    margin-right:5px;
}

因此您可以使用 line-height:50px; 来垂直放置您的文本:

#bullet{
    padding:0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    list-style-type:none;
    line-height:50px;
}

Exemple

编辑:

就像现在一样，它似乎不必是动态的，因此您可以为长文本添加一个特殊的类(特别是在您应该在“&”之前添加一个
的情况下更好的渲染):

.bullet{
    padding:0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    list-style-type:none;
    line-height:50px;
    width:150px;
    margin:15px 0;
}
.twoLine{
    line-height:25px;
}
.bullet:before{
    content:'';
    display:inline-block;
    width:50px;
    height:50px;
    background:url('https://www.imageupload.co.uk/images/2015/09/29/Alerts_icon.png');
    float:left;
    margin-right:5px;
}

Exemple

注意:根据我的说法，如果它必须是响应式的，则不能使用 line-height 来完成。可能是 line-height 和 Javascript

的混合体

关于CSS 列表 : Centering your list text w. r.t 列表样式图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32838439/

27 4 0
文章推荐： ios - Swift - 来自另一个类的运行方法
文章推荐： objective-c - NSWindow 内存选项
文章推荐： macos - didBeginContact 工作绝对不正确 swift
文章推荐： 格式化为字符串时，swift 存储的日期会变得不同
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com