Question

我看到了很多问题如何将div水平和垂直对齐，我也得到了答案。

我得到的代码： HTML -

<div class="outer">
   <div class="middle">
      <div class="inner">
         <div align="center">
            <h1>The Content</h1>

            <p>Once upon a midnight dreary...</p>
         </div>
      </div>
   </div>
</div>

的CSS -

.outer {
   display: table;
   position: absolute;
   height: 100%;
   width: 100%;
}

.middle {
   display: table-cell;
   vertical-align: middle;
}

.inner {
   margin-left: auto;
   margin-right: auto;
   background: blue; /*gave blue to know the height and width*/ 
}

我得到了正确的答案但我无法给它一个默认高度
当我将width: 50%;和height: 50%;提供给class="inner"时，只接受宽度我甚至无法在顶部和底部之间留出填充空间。
请帮助。
请不要再给我一个代码来垂直和水平居中对齐

Answer 1

你想要什么（我想），是这样的：

＆＃13;

body {
    margin : 0;
}

.outer {
   display: table;
   position: absolute;
   height: 100%;
   width: 100%;
}

.middle {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

.inner {
   display: inline-block;
   width: 50%;
   height: 50%;
   background: blue;
}

＆＃13;

<div class="outer">
   <div class="middle">
      <div class="inner">
          <h1>The Content</h1>
          <p>Once upon a midnight dreary...</p>
      </div>
   </div>
</div>

＆＃13;

另见this Fiddle！

Answer 2

您没有在正确的位置指定高度：50％。

50％占据了内部div的一半。你需要做的是为“内部”类中的div分配。

您可以尝试弹性框。

添加此代码：

    private string sharedValue = string.Empty;
    MyServiceReference.MyServiceClient client = null;
    MyService2Reference.MyService2Client client2 = null;

    public Form1()
    {
        InitializeComponent();

        client = new MyServiceReference.MyServiceClient();
        client2 = new MyService2Reference.MyService2Client();
    }

    private void button1_Click(object sender, EventArgs e)
    {
        client.SETValue("Hello this is client 1");

        sharedValue = client2.GETSharedValue();
        lblResult.Text = sharedValue;
    }

在https://jsfiddle.net/ke5z9ukh/1/

上查看

将div水平和垂直对齐后对齐

2 个答案: