Question

我有这个标记

＆＃13;

MediaPlayer mediaPlayer;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mediaPlayer = MediaPlayer.create(getApplicationContext(), R.raw.vapor);
    mediaPlayer.start();
     ..... 
    }
 MusicButton = (ToggleButton)findViewById(R.id.toggleButton);
    MusicButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if(MusicButton.isChecked()){
                mediaPlayer.start();
            }
            else{
                mediaPlayer.stop();
                mediaPlayer.release();
            }
        }
    });

@Override
public void onPause() {
    mediaPlayer.stop();
    mediaPlayer.release();
    super.onPause();
}

@Override
public void onResume() {
    mediaPlayer = MediaPlayer.create(this, R.raw.vapor);
    mediaPlayer.setLooping(false);
    mediaPlayer.start();
    super.onResume();
}

＆＃13;

.course-flex-container {
  display: flex;
  flex-direction: column;
  margin: 5px 5px 5px 5px;
  background-color: red;
}

.course-flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.course-flex-row-2 {
  display: flex;
  flex-direction: row;
}

＆＃13;

我尝试对齐<div class="course-flex-container"> <div class="course-flex-row"> <div>edit</div> <div>delete</div> </div> <div class="course-flex-row-2"> <div>Read Chapter 1 to 3</div> </div> <div class="course-flex-row"> <div>Blaw 3100</div> <div>Due Date: 6/29/2017</div> </div> </div>，但在我使用<div>Read Chapter 1 to 3</div>后，我在text-align: center;及其父div上尝试对齐中心

我从我的代码中删除了div，因为它不起作用，这就是为什么你没有看到它。

Answer 1

使用M与justify-content: center

.course-flex-row-2

.course-flex-container {
  display: flex;
  flex-direction: column;
  margin: 5px 5px 5px 5px;
  background-color: red;
}

.course-flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.course-flex-row-2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

Answer 2

您想要添加内容的任何DIV

margin: auto;

到CSS。您还可以使用

调整顶部和底部边距

margin: 10px auto; //center with 10px top margin.

或

margin: 10px 10px auto; //center with 10px margin at top and bottom.

...然而

text-align: center;

只会将文本居中，而不是div中的元素。

Answer 3

像这样改变：

首先将className更改为class。

改变后像这样：

.course-flex-row-2{
    display: flex;<-----------------Remove
    flex-direction: row;
    text-align: center;
}

.course-flex-row-2 div {<--------------Add
  display: inline-block;
}

＆＃13;

.course-flex-container {
    display: flex;
    flex-direction: column;
    margin: 5px 5px 5px 5px;
    background-color: red;
}

.course-flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.course-flex-row-2{
    flex-direction: row;
    text-align: center;
}

.course-flex-row-2 div{
  display: inline-block;
}

＆＃13;

<div class="course-flex-container">
  <div class="course-flex-row">
    <div>edit</div>
    <div>delete</div>
  </div>
  <div class="course-flex-row-2">
    <div>Read Chapter 1 to 3</div>
  </div>
  <div class="course-flex-row">
    <div>Blaw 3100</div>
    <div>Due Date: 6/29/2017</div>
  </div>
</div>

＆＃13;

Answer 4

我通常选择绝对位置以及内部div和amp;相对于外部div的位置。

检查jsfiddle https://jsfiddle.net/f2vvy6st/

中的相同示例

.course-flex-row-2 {
position: relative;
width: 400px;
height: 400px;
border: 1px solid red;

div {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top:50%;
}

}

Answer 5

将align属性放到父div中，它也应该有效（不推荐但会让你工作）

<div className="course-flex-container" align="center">

如何让这个div对齐中心？

5 个答案: