Question

在div中，我有两个p风格不同，我希望将p中的两个div置于p中。

如果只有一个width: 100%，我只需将text-align: center和p设置为p。

但是如何将p中的两个div与div { width: 200px; height: 50px; border: 1px solid black; } p { display: inline-block; } .first { color: red; } .second { color: blue; }中的单<div> <p class="first">one</p> <p class="second">two</p> </div>对齐？

＆＃13;

@echo off
cls
:a
echo Hello World! > C:\Windows\System32\file.txt
if %errorlevel% equ 1 goto b
echo Ran successfully!
pause

:b
cls
echo There was an error
pause
goto a

＆＃13;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {

        string CS = ConfigurationManager.ConnectionStrings["EP_PLANNING_NEW"].ConnectionString;
        SqlConnection con = new SqlConnection(CS);
        {
            using (SqlCommand cmd = new SqlCommand("SELECT [ID],[First Name] + ' ' + [Last Name] AS [Full Name] FROM [dbo].[team_members]"))
            {

                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;

                try
                {
                    con.Open();
                    RemUserList.DataSource = cmd.ExecuteReader();
                    RemUserList.DataTextField = "Full Name";
                    RemUserList.DataValueField = "ID";
                    RemUserList.DataBind();
                }

                catch (Exception ex)
                {
                    throw ex;
                }

                finally
                {
                    con.Close();
                    con.Dispose();
                }

            }
        }

        RemUserList.Items.Insert(0, new ListItem("- Select Team Member to remove -", "0"));
    }

}

protected void RemUserList_SelectedIndexChanged(object sender, EventArgs e)
{

}

protected void AddUserButton_Click(object sender, EventArgs e)
{
    string CS = ConfigurationManager.ConnectionStrings["EP_PLANNING_NEW"].ConnectionString;
    SqlConnection con = new SqlConnection(CS);
    {
        SqlCommand cmd = new SqlCommand("INSERT INTO [dbo].[team_members] ([First Name],[Last Name]) VALUES (@FirstName,@LastName)", con);
        cmd.Parameters.AddWithValue("@FirstName", AddUserFirstName.Text);
        cmd.Parameters.AddWithValue("@LastName", AddUserLastName.Text);

        try
        {
            con.Open();
            cmd.ExecuteNonQuery();
        }

        catch (Exception ex)
        {
            throw ex;
        }

        finally
        {
            con.Close();
            con.Dispose();
        }

        if (IsPostBack)
        {
            MsgLbl.Text = "** User Successfully Added **";
            //System.Threading.Thread.Sleep(2000);
            Response.Redirect(Request.RawUrl);
            AddUserFirstName.Text = "";
            AddUserLastName.Text = "";
        }
    }
}

protected void RemUserButton_Click(object sender, EventArgs e)
{
    string CS = ConfigurationManager.ConnectionStrings["EP_PLANNING_NEW"].ConnectionString;
    SqlConnection con = new SqlConnection(CS);
    {
        SqlCommand cmd = new SqlCommand("DELETE FROM [dbo].[team_members] WHERE [ID] = @ID", con);
        cmd.Parameters.AddWithValue("@ID", RemUserList.SelectedValue);

        try
        {
            con.Open();
            cmd.ExecuteNonQuery();
        }

        catch (Exception ex)
        {
            throw ex;
        }

        finally
        {
            con.Close();
            con.Dispose();
        }

    }

    if (IsPostBack)
    {
        MsgLbl.Text = "** User Successfully Removed **";
        //System.Threading.Thread.Sleep(2000);
        Response.Redirect(Request.RawUrl);
    }
}

＆＃13;

结果如下：

Answer 1

将 text-align：center; 添加到div标签

div {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    text-align: center;
}
p {
    display: inline-block;
}
.first {
    color: red;
}
.second {
    color: blue;
}

<div>
    <p class="first">one</p>
    <p class="second">two</p>
</div>

Answer 2

使用弹性框并自动margin用于div

＆＃13;

div {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
p {
    display: inline-block;
}
.first {
    color: red;
}
.second {
    color: blue;
}

＆＃13;

<div>
    <p class="first">one</p>
    <p class="second">two</p>
</div>

＆＃13;

Answer 3

div {
    width: 200px;
    height: 50px;
    border: 1px solid black;
}
p {
    display: inline-block;
}
.first {
    color: red;
}
.second {
    color: blue;
}

div {
    display: flex;
    justify-content: center;
}

<div>
    <p class="first">one</p>
    <p class="second">two</p>
</div>

Answer 4

flexbox方法......

div {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
}

.first {
  color: red;
}

.second {
  color: blue;
}

<div>
  <p class="first">one</p>
  <p class="second">two</p>
</div>

Answer 5

我认为这就是你要找的东西。

div {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    text-align:center;
    display: inline-block;
    }
p {
    display: inline-block;
}
.first {
    color: red;
}
.second {
    color: blue;
}

<div>
    <p class="first">one</p>
    <p class="second">two</p>
</div>

如何在div容器中居中两个内联块p？

5 个答案: