How to center a slide?

Question

How to center a slide?

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I'm using this slide which is before and after. The question is: I need to centralize this slide and leave it responsive, because when I play the code it is leaning against the left corner. I tried to give a margin-left , at first it centralizes, only it gets horrible in the responsive, it does not adapt with margin-left (Same in%).

css css3

asked by anonymous 29.07.2015 / 20:01

2 answers

Keep selected option loaded dynamically Problems trying to open NavigationDrawer with the Home Button in ToolBar

score 2 · Answer 1

Place the slide code between tags and see if it works:

<center>
    <div id="exemplo">
        ...
    </div>
</center>

Try to apply CSS then, consider the div id and disregard the center:

#exemplo{
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
}

score 1 · Answer 2

I did not put it in an interface to test. But the logic is that% of all% parent must have div , making it stay in the middle of the screen.

Inside has two margin:auto that are with div's , to leave in the middle, apply position:absolute , margin:auto and left:0 .

For image to be in the middle just put a right:0 in these text-align: center .

To make the image responsive, apply div's to it.

Something else in width:100% parent. It has 800px of div , so the image will pop. Put a width and a width: 100% to determine the size limit for this max-width: 800px; .

Test.

<div class="beforeAfterSlidebar">
   <div class="bottomImage"><img src="images/afterImage.jpg" width="800" height="600" alt="after" /></div>
   <div class="topImage"><img src="images/beforeImage.jpg" width="800" height="600" alt="before" /></div>
</div>

.beforeAfterSlidebar {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 600px;
  margin: auto;
}
.beforeAfterSlidebar div {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0;
  overflow: hidden;
  margin: auto;
  text-align: center;
}

.beforeAfterSlidebar div img{
    width: 100%;
}
.topImage {
  border-right: solid 4px black;
}