Question

我想创建一个项目列表（例如ul），在某些项目中包含多行文本。无论我有多少行，所有文本都应垂直居中。请参阅示例＆＃34; +＆＃34;和＆＃34; =＆＃34;标志不在中心。

.menu ul{
  display: flex;
  }

  .menu li{
    list-style: none;
    text-align: center;
    align-content: center;
  }
<div class="menu">
 <ul>
  <li>Water <br> pressure <br> and volume</li>
  <li>+</li>
  <li>Pot <br> temperature</li>
  <li>=</li>
  <li>Something <br> difficult</li>
 </ul>
</div>

Example of improper behaviour

这种文本对齐是否有一些简单的解决方案（我想避免使用div / grid等）？

谢谢！马尔钦

Answer 1

@ManagedBean(name = "projectBean")
@ViewScoped
public class ProjectBeanCompUI {

        @PostConstruct
        public void init()
        {
            userInfo.setFirstName("Shivani");
            userInfo.setLastName("Kanakhara");
            userInfo.setDepartment("IT/QIE");
            userInfo.setUserID("skanakh");
            users.add(userInfo);
           }
           private UserInfo userInfo = new UserInfo();
        private List<UserInfo> users = new ArrayList<>();


        public UserInfo getUserInfo() {
            return userInfo;
        }
        public void setUserInfo(UserInfo userInfo) {
            this.userInfo = userInfo;
        }
        public List<UserInfo> getUsers() {
            return users;
        }
        public void setUsers(List<UserInfo> users) {
            this.users = users;
        }

    }

如果我理解你的话，请使用li-Tags。

Answer 2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core">
    <h:head>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <script src="../js/projectRequest.js"></script>
</h:head>   
    <h:form id="tst">

    <p:selectOneMenu id="city" value="#{projectBean.userInfo.userID}" effect="fold" 
    required="true" requiredMessage="City is required." editable="true" > 
            <f:selectItem itemLabel="Select One" itemValue="" />
            <f:selectItems value="#{projectBean.users}" var="user" itemValue="#{user.userID}" itemLabel="#{user.firstName}"  />
   </p:selectOneMenu>

    </h:form>
</html>

自动顶部和底部的边距将逐个居中。

列表中的更多行<ul>和垂直居中对齐

2 个答案: