Question

我正在尝试将3个按钮对齐到一行的中间。使用CSS和HTML实现结果

我做了什么：

1 / Css：

DECLARE @DataSource TABLE
(
    [ID] INT
   ,[Name] VARCHAR(12)
   ,[Address] VARCHAR(12)
);

INSERT INTO @DataSource ([ID], [Name], [Address])
VALUES (1, 'nm1', 'abc')
      ,(1, 'nm2', 'def')
      ,(1, 'nm3', 'ghi')
      ,(0, 'nm4', 'jkl')
      ,(0, 'nm5', 'mno')
      ,(0, 'nm6', 'pqr')
      ,(1, 'nm7', 'stu')
      ,(1, 'nm8', 'vwx')
      ,(1, 'nm9', 'yza')
      ,(0, 'nm10', 'bcd');

SELECT *
      ,SUM([change_made]) OVER (ORDER BY  CAST(REPLACE([Name], 'nm', '') AS INT))
FROM
(
    SELECT *
          ,IIF([ID] <> LAG([ID], 1, -1) OVER (ORDER BY CAST(REPLACE([Name], 'nm', '') AS INT)), 1, 0) AS [change_made]
    FROM @DataSource
) DS
ORDER BY CAST(REPLACE([Name], 'nm', '') AS INT);

2 / html：

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: white;
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}

结果：3个按钮位于行的中间，但未对齐。

我期望的是：

3个按钮使垂直中心与直线对齐。

任何建议都值得赞赏

****编辑*****

我将根据此处的建议更新结果

1 /来自@Gerard

Answer 1

我更喜欢使用flexbox，因为它具有自然的响应能力。

docker run -t postman/newman_ubuntu1404 run "https://www.getpostman.com/collections/8a0c9bc08f062d12dcda"
newman: Newman v4 deprecates support for the v1 collection format
  Use the Postman Native app to export collections in the v2 format

newman

newmanTest

→ GET with URL Params
  GET http://httpbin.org/get?lol=true [200 OK, 542B, 339ms]
  ✓  Response contains params

→ POST with JSON body
  POST http://httpbin.org/post [200 OK, 704B, 158ms]
  ✓  Check POST param in response

→ DELETE request
  DELETE http://httpbin.org/delete [200 OK, 606B, 184ms]
  ✓  Status code is 200

→ PUT with form data
  PUT http://httpbin.org/put [200 OK, 687B, 159ms]
  ✓  Test form data

┌─────────────────────────┬──────────┬──────────┐
│                         │ executed │   failed │
├─────────────────────────┼──────────┼──────────┤
│              iterations │        1 │        0 │
├─────────────────────────┼──────────┼──────────┤
│                requests │        4 │        0 │
├─────────────────────────┼──────────┼──────────┤
│            test-scripts │        4 │        0 │
├─────────────────────────┼──────────┼──────────┤
│      prerequest-scripts │        0 │        0 │
├─────────────────────────┼──────────┼──────────┤
│              assertions │        4 │        0 │
├─────────────────────────┴──────────┴──────────┤
│ total run duration: 1204ms                    │
├───────────────────────────────────────────────┤
│ total data received: 1.52KB (approx)          │
├───────────────────────────────────────────────┤
│ average response time: 210ms                  │
└───────────────────────────────────────────────┘

.strike {
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  border: thin solid red; /* for visibility only */
}

.strike:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  height: 1px;
  background: gray;
  z-index: -1;
}

.strike>button {
  min-width: 40px;
  border-radius: 50%;
}

.btn.tw {
  background-color: #1da1f2
}

.btn.fb {
  background-color: #3B5998
}

.btn.ms {
  background-color: #0084ff
}

Answer 2

尝试一下：

.strike > span{
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}

使用摘要代码可以轻松帮助您，但是请尝试使用此代码...

Answer 3

尝试这个vertical-align: middle;

.strike > span button {
    vertical-align: middle;
}

Answer 4

虽然不清楚您要问什么。但这是您需要的吗？

.strike {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

.strike>span {
  position: relative;
  display: inline-block;
}

.strike>span:before,
.strike>span:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  height: 1px;
  background: #000;
}

.strike>span:before {
  right: 100%;
  margin-right: 15px;
}

.strike>span:after {
  left: 100%;
  margin-left: 15px;
}

button {
  width: 40px;
  border-radius: 22px !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="row">
  <div class="col-12 ">
    <br/>
    <div class="strike">
      <span>
                <button class="btn btn-info btn-just-icon"
                    style="background-color: #1da1f2">
                    <i class="fa fa-twitter"></i>
                </button>
                <button class="btn btn-just-icon"
                    style="background-color: #0084ff">
                    <i class="fab fa-facebook-messenger" style="color: white;"></i>
                </button>
                <button class="btn btn-just-icon"
                    style="background-color: #3B5998">
                    <i class="fa fa-facebook-f" style="color: white;"></i>
                </button>
            </span>
    </div>
  </div>
</div>

如何在行中间对齐资源中心

4 个答案: