中心3不对称div由第二个中心

Question

与其他问题听起来类似，但我的问题是这样的：我想加入两个不同的徽标，并在它们之间加上一个加号图标。徽标必须处于相同高度但保持比率。因此大多数时候，某些徽标会比另一徽标更长。当我以public static FlatFileItemReader<Person> reader( String filenameStandard) { FlatFileItemReader<Person> reader = new FlatFileItemReader<Person>(); reader.setLinesToSkip(1); System.out.println("Job parameter ++++++++++++++++++++++"+filenameStandard); //working configuration with ClassPathResource //reader.setResource(new ClassPathResource(filenameStandard)); /* String location= "s3://"+ "iebr-input"+"/" +"test_data.csv"; reader.setResource(new AmazonS3Resource(amazonS3ClientInitializer, "iebr-input", "test_data.csv"));*/ reader.setRecordSeparatorPolicy(new DefaultRecordSeparatorPolicy()); reader.setLineMapper(new DefaultLineMapper<Person>() { { setLineTokenizer(new DelimitedLineTokenizer() { { // setNames(new String[] { "id", "firstName", "lastName" ,"harmScore", "removabilityScore", "kowScore"}); setNames(new String[] {"case", "name", "ccd_case", "date_of_birth", "family", "fullname" }); } }); setFieldSetMapper(new BeanWrapperFieldSetMapper<Person>() { { setTargetType(Person.class); } }); } }); return reader; } 为中心时，结果与我想要的结果大不相同：

我希望将其与text-align标记对齐。

这是我的代码：

＆＃13;

＆＃13;

+

＆＃13;

div#coopLogo div {
  display: inline-block;
}

#logo-container {
  text-align: center;
  width: 100%;
  display: block;
}

#middle-indicator {
  width: 50%;
  border-right: 1px solid;
  height: 100px;
}

＆＃13;

＆＃13;

＆＃13;

JSFiddle

Answer 1

现在我解决了。我将徽标移到＆＃34; plus＆＃34; div并将其对齐为中心，然后我将徽标的position更改为absolute。 我更新的HTML：

＆＃13;

＆＃13;

div#coopLogo div {
  display: inline-block;
}

img {
  top: 0;
  height: 50px;
}

div#coopLogo {
  height: 50px;
}

.plus {
  position: relative;
  width: 10px;
  overflow: visible;
  margin: 0 auto;
}

.lg-right {
  position: absolute;
  right: 100%;
}

.lg-left {
  position: absolute;
  left: 100%;
}

#logo-container {
  text-align: center;
  width: 100%;
  display: block;
}

#middle-indicator {
  width: 50%;
  border-right: 1px solid;
  height: 100px;
}

＆＃13;

<div id="logo-container">
  <div id="coopLogo">
    <div class='plus'>
      <img class='lg-left' src="https://i.stack.imgur.com/3efOW.png">+
      <img class='lg-right' src="https://assets.crossref.org/logo/crossref-logo-landscape-200.svg" alt=""></div>
  </div>
</div>
<br>
<div id="middle-indicator"></div>

＆＃13;

＆＃13;

＆＃13;

小提琴：https://jsfiddle.net/vskuvw3s/20/ 如果你们有其他方法可以做到这一点或任何改进建议，请随时评论/回答。

Answer 2

除非您想要元素重叠，否则不要使用绝对定位。

实现所需布局的选项。

更新：要与图片一起使用，请将其移至div而不是文字和max-width: 100%; or add needed height for container (＃coopLogo`）。

Flexbox的

您可以使用嵌套的flexbox来实现所需的布局。演示：

#coopLogo {
  /* become a flex-container */
  /* its children will be flex items */
  display: flex;
}

/* just adding non-breakable space */
#coopLogo > *:not(:last-child):after {
  content: "\A0";
}

#coopLogo > :first-child {
  /* move flex-items (children) to the right */
  justify-content: flex-end;
}

#coopLogo > :first-child {
  /* move flex-items (children) to the left */
  justify-content: flex-start;
}

#coopLogo > :first-child,
#coopLogo > :last-child {
  /* occupy remaining width */
  flex: 1 0 0;
  /* become a flex-container */
  display: flex;
}

#middle-indicator {
  width: 50%;
  border-right: 1px solid;
  height: 100px;
}

<div id="logo-container">
  <div id="coopLogo">
    <div>Brand 1 logo(longer)</div>
    <div>+</div>
    <div>B2 logo</div>
  </div>
</div>
<br>
<div id="middle-indicator"></div>

表

您可以使用display: table和display: table-cell为子项获得所需的布局。这是最好的浏览器支持。

#coopLogo {
  display: table;
}

#coopLogo > * {
  display: table-cell;
}

/* just adding non-breakable space */
#coopLogo > *:not(:last-child):after {
  content: "\A0";
}

#coopLogo > :first-child {
  text-align: right;
}

#coopLogo > :first-child,
#coopLogo > :last-child {
  width: 50%;
}

#middle-indicator {
  width: 50%;
  border-right: 1px solid;
  height: 100px;
}

<div id="logo-container">
  <div id="coopLogo">
    <div>Brand 1 logo(longer)</div>
    <div>+</div>
    <div>B2 logo</div>
  </div>
</div>
<br>
<div id="middle-indicator"></div>

CSS网格布局

使用新的CSS Grid模块将解决此任务

#coopLogo {
  /* becoma a grid-container */
  /* its children will be grid-items */
  display: grid;
  /* specify column width of children */
  /* 1fr means remaining space */
  grid-template-columns: 1fr auto 1fr;
}

/* just adding non-breakable space */
#coopLogo > *:not(:last-child):after {
  content: "\A0";
}

#coopLogo > :first-child {
  /* move content to the right */
  margin-left: auto;
}

#middle-indicator {
  width: 50%;
  border-right: 1px solid;
  height: 100px;
}

<div id="logo-container">
  <div id="coopLogo">
    <div>Brand 1 logo(longer)</div>
    <div>+</div>
    <div>B2 logo</div>
  </div>
</div>
<br>
<div id="middle-indicator"></div>

为了在IE10 + / Edge中工作，您需要添加旧的语法属性并手动指定列（对于IE / Edge，还添加了嵌套的flex-container）。结果：

#coopLogo {
  /* becoma a grid-container */
  /* its children will be grid-items */
  display: -ms-grid;
  display: grid;
  /* specify column width of children */
  /* 1fr means remaining space */
  -ms-grid-columns: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
}

/* just adding non-breakable space */
#coopLogo > *:not(:last-child):after {
  content: "\A0";
}

#coopLogo > :first-child {
  /* move content to the right */
  display: flex;
  justify-content: flex-end;
}

#coopLogo > :nth-child(2) {
  -ms-grid-column: 2;
}

#coopLogo > :last-child {
  -ms-grid-column: 3;
}

#middle-indicator {
  width: 50%;
  border-right: 1px solid;
  height: 100px;
}

<div id="logo-container">
  <div id="coopLogo">
    <div>Brand 1 logo(longer)</div>
    <div>+</div>
    <div>B2 logo</div>
  </div>
</div>
<br>
<div id="middle-indicator"></div>