Question

编辑：我意识到我的要求很模糊。我正在尝试将一个段落移到网站的右中心。这是我要制作的登录页面，我不确定是什么原因导致段落块无法从其原始位置移出。以下是我正在使用的HTMl / CSS。

我尝试使用边距，浮点，文本对齐

public class Node<T> {

    private List<Node<T>> children = new ArrayList<Node<T>>();
    private Node<T> parent = null;
    private T data = null;
    private String a = "";

    public Node(T data) { //used to create parent
        this.data = data;
    }

    public Node(T data, Node<T> parent) {
        this.parent = parent;
        Node<T> child = new Node<T>(data);
        this.parent.children.add(child); 
    }

    public Node<T> getParent(Node<T> child){
        return child.parent;
    }

    public List<Node<T>> getChildren() {
        return children;
    }

    public int getSize(){
        return children.size();
    }

    public String toString(){
        for(int i=0; i<children.size();i++){
          a = a + parent.children.get(i).getData()+ ",";
        }
        return a ;
    }

    public T getData() {
        return data;
    }
}



import java.util.List;

public class main {

    public static void main(String[] args) {
        Node<String> parentNode = new Node<String>("Parent");
        Node<String> childNode1 = new Node<String>("Child 1", parentNode);
        Node<String> childNode2 = new Node<String>("Child 2", parentNode);
        List<Node<String>> ChildrenOfParents = parentNode.getChildren();
        System.out.println(ChildrenOfParents.size());
        System.out.println(ChildrenOfParents.toString());


    }

}

#test {
  background-color: #000;
  background: url(https://res.cloudinary.com/dod6u4bjy/image/upload/v1557191977/matteo-kutufa-1135337-unsplash.jpg)no-repeat center center fixed;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position:fixed;
}

#testnav {
  margin: 50px 220px;
  list-style: none;
}

#wrapper {
  margin: 165px 50px;
}
 #testnav a:hover {
   text-decoration: underline;
 }

 #testnav a {
   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
   font-size: 14px;
   text-decoration: none;
   width: 100px;
}

 li {
   margin: 4px 0;
 }

 #socialnav li{
   display:inline;
   color: pink;
 }

 #socialwrap {
   margin: 0 220px;
}
 #socialwrap a:hover{
   opacity: 0.7;
   color: pink;
 }

 #logo {
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 100px;
}
.paragraph{
  border: solid black 1px;
  color: pink;
  font-size: 24px;
  text-align: center;
  width:100%;
}

#intro {
  border: solid red 1px;
  display: inline-block;
  width: 80%;
}

</style>

Answer 1

您的问题尚不清楚。如果要在右上角输入文字，请尝试以下操作：

.paragraph{
  Color: pink;
  font-size: 24px;
   position:absolute;
   top:0;
   right:0;
}

<div class="paragraph">
  <p >This is a new website concept dedicated to my   love the Japanese culture. <br>I hop to bring this idea to the masses.</p>
</div>

Answer 2

您不清楚“顶部”是什么意思，但是以下内容将使您的文字居中。为此，您需要设置内部块都具有宽度并将其设置为显示为嵌入式块。然后将外部div设置为文本居中对齐。

.paragraph{
  border: solid black 1px;
  color: pink;
  font-size: 24px;
  text-align: center;
  width:100%;
}

#intro {
  border: solid red 1px;
  display: inline-block;
  width: 80%;
}

<div class="paragraph">
<div id="intro">This is a new website concept dedicated to my love the Japanese culture. <br>I hop to bring this idea to the masses.</div>
</div>

注意：处理对齐时，通常最好使用边框来测试块实际开始和结束的位置。我在上面的代码中放了一个示例边框。您可以调整代码，然后在满意时删除边框。

Answer 3

我使用了flexbox方法来使段落居中。尝试演示。

.paragraph {
  Color: pink;
  font-size: 24px;
  margin: 0 auto;
  width:100%;
  display: flex;
  flex-wrap: wrap;
}
.paragraph p {
  align-items: center;
}

<div class="paragraph">
<p>This is a new website concept dedicated to my love the Japanese culture. <br>I hop to bring this idea to the masses.</p>
</div>

Center Center在代码段下方对齐了段落。

.paragraph {
  Color: pink;
  font-size: 24px;
  display: flex;
  flex-wrap: wrap;
  height:500px; /*optional */
}
.paragraph p {
    align-self: center;
    text-align: center;
    display: block;
    width: 100%;
}

<div class="paragraph">
<p>This is a new website concept dedicated to my love the Japanese culture. <br>I hop to bring this idea to the masses.</p>
</div>

如何对齐段落div

3 个答案: